jquery和toggleClass

Question

我有一個腳本的網站。 當你點擊一個鏈接時，它會切換頁面，同時使用jquery中的toggleClass方法切換鏈接本身。

該腳本工作正常，但頁面被加載在彼此的頂部，所以我改變了一下。 如果您第一次點擊鏈接，鏈接會更改（更大）並顯示頁面。鏈接的值存儲在一個變量（previousClick）中。 現在，如果我點擊第二個鏈接，則上一頁消失，並出現新頁面。這工作正常。但之前的鏈接保持較大。我無法找出如何將其恢復到一個較小的字體...

下面是代碼：

var pages = function() 
{ 
    var nav = $('ul#nav li a'); 
    var previousClick = ''; 

    nav.click(function() 
    { 
     if (previousClick.length==0) 
     { 
      $(this).parent().toggleClass('selected'); 
      $($(this).attr('href') + '-page').toggle(500); 
      previousClick = $(this).attr('href'); 
      return false; 
     } 
     else 
     { 
      $('li a [href=' + previousClick + ']').toggleClass('selected'); 
      $(previousClick + '-page').toggle(500); 
      $(this).parent().toggleClass('selected'); 
      $($(this).attr('href') + '-page').toggle(500); 
      previousClick = $(this).attr('href'); 
      return false; 
     } 
    }); 
}; 

$(window).load(pages); 

的CSS：

ul#nav li { padding: 1px; } 
ul#nav li a 
{ 
    font: italic normal 20px/normal 'Palatino Linotype', Georgia, Comic sans MS, Times, Serif; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
    position: relative; 
    z-index: 3; 
    color: #fff; 
    display: block; 
} 
ul#nav li a span 
{ 
    font-size: 28px; 
    font-family: Baskerville, Palatino, 'Palatino Linotype', Georgia, Serif; 
    /*color: #3b0314;*/ 
    color: #FEDB00; 
} 
ul#nav li a:hover, 
ul#nav li.selected a 
{ 
    font-size: 200%; 
} 

，而在HTML菜單：

<ul id="nav"> 
    <li id="star-top"></li> 
    <li><a href="#société"><span>Qui</span>sommes nous?</a></li> 
    <li><a href="#coachingé">Coaching<span>à</span>domicile</a></li> 
    <li><a href="#entrainementé"><span>Plan</span>d'entrainement</a></li> 
    <li><a href="#aquatiqueé"><span>Activités</span>aquatiques</a></li> 
    <li><a href="#entreprisé"><span>Espace</span>Entreprise</a></li> 
    <li id="star-bot"></li> 
    <li><a href="#contact">Contactez<span>nous</span></a></li> 
    <li><a href="#partenaire"><span>Nos</span>partenaires</a></li> 
</ul> 

非常感謝

Answer 1

我想，因爲你正在使用$(this).parent().toggleClass('selected');，你也應該使用：

$('li a[href=' + previousClick + ']').parent().toggleClass('selected'); 

代替

$('li a [href=' + previousClick + ']').toggleClass('selected'); 

編輯：

，或者甚至更好，使用：

$('#nav li:has(a[href=' + previousClick + '])').toggleClass('selected'); 

我加了#nav因爲:has匹配所有的後代，不僅dir孩子們。因此，如果您的#nav被另一個<li>包裹，那麼也會切換其類。

編輯：

啊，我現在就明白了。這非常微妙：a [href=...]的意思是「一個標籤，其href的值...在a標籤內」。所以，它會匹配<a><a href="..."></a></a>，這不是我們想要的。你應該使用a[href=...]，沒有空間。