javascript - jquery文档功能问题

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');
       }
   });
});

更新我放了日志console.log(currentUrl +"=="+ $(this).children('a').attr('href')); ，它说状态是未定义的。我认为“if”条件没有被执行，因为，我把和 else 条件放在了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 点击事件

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

"

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