jQuery菜單項已選擇

Question

我都！

我有這個菜單：

  <ul id="navigation">
      <li><a href="index.php">Home</a></li>
      <li><a href="index.php?page=Entidad">Entidad</a></li>
  </ul>

使用jQuery時，我想在單擊菜單項時應用.active類，例如：

  $(document).ready(function(){
      $("li a").click(function(){
           $(this).parent().find("li").addClass('active');   
      });
  });

它不起作用，您能幫我嗎？

Answer 1

在parent的a是li它的自我，所以你不需要find李。

現場演示

$(document).ready(function(){
      $("li a").click(function(){
           $(this).parent().addClass('active');   
      });
});

編輯從先前的元素中刪除該類並添加到當前元素

現場演示

$(document).ready(function(){
      $("li a").click(function(event){
           $('#navigation li').removeClass();
           $(this).parent().addClass('active');
      });
});

Answer 2

當處理的點擊a ， li是父項目，所以才這樣做：

$(this).parent().addClass('active'); 

但是，您是否確定這一點，因為我認為使鏈接成為活躍的事物是明智的？ 只是一個觀察。

Answer 3

單擊超鏈接后，頁面將刷新，因此此代碼$(this).parent().addClass('active')將不起作用。

嘗試以下方法：

$(function() {
                var page = getParameterByName('page');
                $("#navigation a:contains('" + page + "')").parent().addClass('active');
            });

            function getParameterByName(name)
            {
              name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
              var regexS = "[\\?&]" + name + "=([^&#]*)";
              var regex = new RegExp(regexS);
              var results = regex.exec(window.location.search);
              if(results == null)
                return "Home";
              else
                return decodeURIComponent(results[1].replace(/\+/g, " "));
            }

Answer 4

只是

$(this).parent().addClass('active'); //  $(this).parent() selects list element

無需在那里再次找到li元素。