Question

我是jQuery的新手，并希望使用它来保持当前菜单项的选择（因为它看起来处于悬停状态。）

我的警报正在触发，因此该功能似乎正在启动。当它没有被注释掉时，第一个语句，一个背景颜色为黄色的工作。但是，我似乎无法让其他人影响菜单。 “选定”类似乎不起作用。换句话说，我在菜单中选择的项目以黄色突出显示，直到页面发生变化，然后返回默认颜色。我为.selected类尝试了很多名称组合，包括.selected。

的jQuery

<script>
 $(document).ready(function() {
   $('.nav ul li').click(function() {
     alert("Go!");
   /*$('a', this).css("background-color","yellow");*/ 
    $('a', this).removeClass('selected');
    $('a', this).addClass('selected');  
  });
 });
</script>

HTML

<div class="nav">
 <ul class="nav ul">
      <li class="selected"> <a href="index.php">HOME</a> </li>
      <li> <a href="about.php">ABOUT</a> </li>
      <li> <a href="k-5.php">K-5 PROJECTS<strong class="caret"></strong></a></li>
      <li> <a href="wishlist.php">WISH LIST</a> </li>
      <li> <a href="history.php">ART HISTORY</a> </li>
      <li> <a href="funlinks.php">FUN LINKS</a> </li>
      <li> <a href="contact.php">CONTACT</a> </li>     
 </ul>
</div>

CSS

.nav ul li a:active {
   background-color: #FFB01C;
}

.nav ul li a:hover {
   background-color: #FFB01C;
}

.nav ul li .selected {
   background-color: #FFB01C;
}

Answer 1

要确保此功能可以使用此代码

<script>
 $(document).ready(function() {
   $('.nav ul li').click(function() {
     // the following code
     event.preventDefault();
     alert("Go!");
   /*$('a', this).css("background-color","yellow");*/ 
    $('a', this).removeClass('selected');
    $('a', this).addClass('selected');  
  });
 });
</script>

这将阻止页面重新加载。或者您应该保存用户在缓存或cookie中单击的列表项中的哪一个，然后根据该数据更改样式。

正如j08691在评论中已经说过的那样，您的更改正在应用中。但是，只要在浏览器中加载新文档（新页面），就会进行更改。你也提到了这个问题。

我做了一些更改，在这里你可以测试它们http://jsfiddle.net/gjsb398g/

jQuery中的Selecter更改为，

$('.nav li')

由于您已将该类应用于列表本身，因此$('.nav ul li')无效。

上面已经描述了第二次改变。页面正在加载，因为您的代码中有超链接。这必须将您的文档移动到下一个文档（加载下一个文档），以防止它发生，我添加了代码。现在它有效。

Answer 2

我认为这可以解决你的要求：

<script>
 $(document).ready(function() {
  var loc = window.location;
    var pathName = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
    if(pathName=="")
    {
           $(".nav a").each(function(){                     
            var at=$(this).prop("href");
            if(at=="index.php")
            {
              $(this).parent().addClass("selected");                
            }
        });
    }
    else
    {
            $(".nav a").each(function(){                        
            var at=$(this).prop("href");
            if(at==pathName)
            {
                $("li.selected").removeClass("selected");
                $(this).parent().addClass("selected");              
            }
         });
    }
 });
</script>

让jQuery制作项目＆＃34;选择＆＃34;

2 个答案: