获得了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> 

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/

Selecter jQuery中已变更为

$('.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>