CSS精灵菜单和jQuery addClass（）方法

我创建CSS精灵菜单基于此教程： http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/ 现在我想.selected类分配给它被点击的最后一个“一”。我添加了sipmle脚本：CSS精灵菜单和jQuery addClass（）方法

<script> 
    $("a").click(function(){ 
     $(this).addClass("selected"); 
    }); 
</script>

但类.selected仅在加载页面时出现。加载整页菜单项后返回到其正常状态。你能帮我解决这个问题吗？ TIA

有一个愉快的一天:)

来源

2011-09-28 mkas

您是否试图将代码放在'$（document）.ready（function（）{// code here}）中;' – Marnix

不会点击'a'将您带到不同的页面？ – Usman

@Usman是对的。当您点击链接时，您将离开您的页面。解决方案：制作一些额外的脚本功能，将“已选”类添加到刚加载的页面。 – Marnix

点击a会带你到一个不同的页面，所以这个事件是不会为你工作。要selected类添加到您的代码像下面的当前链接：

<script> 
$(function(){ //short form of $(document).ready(function(){ 
    $("a").each(function(){ 

     path=window.location; 
     path=String(path).split('/')['3']; //if you use absolute URLs then disable this line 

     if($(this).attr('href')==path) 
     { 
      $(this).addClass("selected"); 
     } 
    }); 
}); 
</script>

这将增加selected类链接（S），如果它是href的浏览器的当前URL匹配。

来源

2011-09-28 19:24:54 Usman

值得一提的是，由于这是客户端，如果用户关闭了Javascript，它将不起作用。这并不常见，但仍值得记住。 –

我相信你会让它变得比需要的更复杂。这里有一个快速的解决方案，使用CSS而不是庞大的JS :)

首先，你的身体标签应该有分配给他们的类。

<body class="products">

例如。

现在，在你的菜单中，分配每个<li>（我猜/希望你正在使用一个列表，你没有提供任何代码，所以我不知道......）以及类。

<li class="products"><a href="/products/">Products</a></li>

例如。现在

，在你的CSS，只要做到这一点：

body.products ul#menu li.products a { /* Define how the "selected" button should look, here. */ }

这些CSS规则将仅被“拿来主义”，当访问者是“选择”页面上。

这种技术毫无疑问是msot的使用方式，因为它是毫无疑问的最快和非常友好的搜索引擎优化，因为您的主导航中的代码始终保持相同的整个网站。

来源

2011-09-28 20:12:09

CSS精灵菜单和jQuery addClass（）方法

回答

相关问题