让jQuery使项目“被选中”

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>

<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>