Question

我有这样的HTML代码：

<ul class="myClass">
    <li><a href="url1.html">first link</a></li>
    <li><a href="url2.html">second link</a></li>
    <li><a href="url2.html">third link</a></li>
    <li><a href="url3.html">fourth link</a></li>
</ul>

我的想法是，当我按下链接时，它应该写入被按下的链接下一个属性字符串：class =“active”。例如，如果我们有

<li><a href="url1.html">first link</a></li>`

我按下它，jQuery函数应该将其更改为：

<li><a class="active" href="url1.html">first link</a></li>

但是我的jQuery功能并没有真正起作用。如果你能帮助我，我将非常感激。这是jQuery函数的来源：

$(document).ready(function(){
   var currentUrl = document.location.pathname;
   $('#myClass').each(function() {
       if ( currentUrl == $(this).children('a').attr('href')) {
           $(this).children('a').addClass('active');
       }
   });
});

UPDATE 我把日志console.log(currentUrl +"=="+ $(this).children('a').attr('href')); 它说国家是不确定的。我认为“if”条件没有被执行，因为，我把其他条件放在那里alert，所以任何紧急调用都会发出警告，if条件永远不会被执行。

Answer 1

#myClass是 id 选择器，而不是类选择器。你想要.myClass

children()只会选择子项（li元素），这些元素没有href个属性且与a不匹配。

您希望#myClass为.myClass > li，以便循环显示列表项。

Answer 2

你想要实现的目标，可以很快写成：

$(document).ready(function(){        
     var curl = document.location.pathname;  //current url
     curl = curl.substr( curl.lastIndexOf('/')+1 );
     $('.myClass a[href="'+curl+'"]').addClass('active');
});

Answer 3

使用jQuery click event

$(document).ready(function(){
     $('.myClass a').click(function() {
         $(this).addClass('active');
     });
});

这个答案解决了你的问题：

“我的想法是，当我按下链接时，它应该写入被按下的链接下一个属性字符串：class =”active“。例如，如果我们有

<li><a href="url1.html">first link</a></li>`

我按下它，jquery函数应该将其更改为：

<li><a class="active" href="url1.html">first link</a></li>

“

我猜你有一个不同的问题，但你的问题并不清楚。

jquery文档功能问题

3 个答案: