jquery - 已选择 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所以你不需要findli。

现场演示

$(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 元素。