在導航鏈接中添加和移除活動課程

我一直在尋找關於如何從鏈接添加和移除課程的教程，但不幸沒有任何成功。所有關於這個的早期問題都給了我一些理解，但並沒有給我想要達到的結果。在導航鏈接中添加和移除活動課程

我試圖通過在點擊鏈接時添加和刪除類來實現我的導航的活動狀態。

這裏是我儘可能的JavaScript：

$(document).ready(function(){ 

    //active state 
    $(function() { 
     $('li a').click(function(e) { 
      e.preventDefault(); 
      var $this = $(this); 
      $this.closest('li').children('a').removeClass('active'); 
      $this.parent().addClass('active'); 

     }); 
    }); 
});

這是我的導航：

<div id="nav"> 
    <div id="main-nav" class="center"> 
     <ul> 
      <li><a href="/photography.php">Photography</a></li> 
      <li><a href="/web.php">Web</a></li> 
      <li><a href="/print.php">Print</a></li> 

      <li class="nav-R"><a href="/about.php">About</a></li> 
      <li class="nav-R"><a href="/contact.php">Contact</a></li> 
     </ul> 
    </div><!-- close center --> 
</div><!-- close-nav -->

來源

2011-12-05 user782245

我認爲最快的辦法是$（「主導航UL麗」）removeClass（「主動」） – Ben

您刪除從最近li「活動」類的子元素，然後你將活性類當前a「母公司li。在保持對錨活動類，而不是列表項的精神，這會爲你工作：

$('li a').click(function(e) { 
     e.preventDefault(); 
     $('a').removeClass('active'); 
     $(this).addClass('active'); 
    });

活動鏈接是活動鏈接。在任何時候都不會有多於一條的鏈接活動，所以沒有理由全部關於移除active類的具體內容。只需從所有錨上移除。

演示：http://jsfiddle.net/rq9UB/

來源

2011-12-05 00:41:17 AlienWebguy

謝謝，現在唯一的一點是，點擊鏈接時不會加載所選頁面 – user782245

它最初不會使用'e.preventDefault（）;':) – AlienWebguy

爲什麼你不接受這個回答？什麼改變了？ – AlienWebguy

嘗試：

$(function() { 
    $('li a').click(function(e) { 
     e.preventDefault(); 
     var $this = $(this); 
     $this.closest('ul').find('.active').removeClass('active'); 
     $this.parent().addClass('active'); 

    }); 
});

你的選擇是看父母元素的當前（$(this)）a元素，然後在第e該子元素的子元素爲a。該元素中唯一的a是您剛剛點擊的元素。

我的解決方案改爲移動到最接近的ul，然後找到element that currently has the class of active，然後刪除該類。

此外，您發佈的方法是將active類名添加到li元素，並且您正在尋找從a元素中刪除類名。我的方法使用li，但可以通過簡單地從最後一行刪除parent()來修改以使用a。

參考文獻：

來源

2011-12-05 00:37:37

我想你想：

$this.parents("ul").find("a").removeClass('active');

來源

2011-12-05 00:38:34

他加入的類。（li li） – Ben

@Ben - 我認爲他已經加入了主播 –

我的理解是$（「li a」）使得$（this）成爲錨，然後他使用$ this 。.parent（）addClass（ '激活'）;李會是父母嗎？ – Ben

試試這個：

$(function() { 
    $('.start').addClass('active'); 
     $('#main-nav a').click(function() { 
     $('#main-nav a').removeClass('active'); 
     $(this).addClass('active');    
    }); 
});

類。開始只是添加到你想擁有類。主動先nav元素。

然後聲明類。活躍在你的CSS這樣的：

#main-nav a.active { 

/* YOUR STYLING */ 

}

來源

2011-12-05 00:41:43 Melros

在導航鏈接中添加和移除活動課程

回答

相關問題