Question

我有HTML

<div id="top" class="shadow">
  <ul class="gprc"> 
    <li><a href="http://www.domain.com/">Home</a></li> 
    <li><a href="http://www.domain.com/link1/">Text1</a></li> 
    <li><a href="http://www.domain.com/link2/">Text2</a></li> 
    <li><a href="http://www.domain.com/link3/">Text3</a></li> 
    <li><a href="http://www.domain.com/link4">Text4</a></li> 
  </ul> 
</div>

和JQUERY

$(function () {
    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
    $('#top a').each(function () {
        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $(this).addClass('active');
        }
    });    
});

问题在于，当我点击主页链接时，所有选项卡都会变为活动类，并且不明白原因。我需要它来获得第一个没有获得任何活动课程的链接。

Answer 1

选中此选项，这将仅激活点击的标签，删除所有人的有效标签，然后为点击的标签添加

$("#top a").click(function() {
    $('a').removeClass('active');
    $(this).addClass("active");
});

Check this

Answer 2

我也在寻找这个解决方案，我已经测试了你的代码。在第一种方法中，所有链接都会突出显示，当我单击其他链接时，它正常工作。问题出现在主页上，因为所有链接都突出显示，因为没有收到任何活动＆＃34;加载页面时，如果发送命令或理论上单击每个链接，代码将起作用。为了阻止这种行为，我在上面的答案中找到了这个代码，添加了这段代码并更改了＆＃34; .sibling（）＆＃34; to＆＃34; .previousSibling（）＆＃34;

$(this).parent().sibling().find('a').removeClass('active');

＆＃34; .sibling（）＆＃34;将在链接末尾突出显示，将其更改为＆＃34; .previousSibling（）＆＃34;所以它会先到（李）

$(this).parent().previoussibling().find('a').removeClass('active');

您的代码将是这样的：

    $(function () {
    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
    $('#top a').each(function () {
        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $(this).addClass('active');
            $(this).parent().previoussibling().find('a').removeClass('active');
        }
    });    
});

Answer 3

您正在foreach div中的所有<a>代码上运行#top循环。所以当然它会将类active添加到所有这些类中。

我认为你要做的是：http://jsfiddle.net/rLddf/4/

我改为使用click事件。

编辑切换到Kristof Feys示例的链接 - 效率更高。

Answer 4

我认为你需要这样的东西：

$(function () {
    $("#top a").click(function(e){
        e.preventDefault();
        $(this).addClass('active');
        $(this).parent().siblings().find('a').removeClass('active');
    });
});

Fiddle Demo

Answer 5

你可以尝试一下。它会对你有所帮助：

<script type="text/javascript">
    $(function () {
        $('#sidebar li a').each(function () {
            var path = window.location.pathname;
            if (path.indexOf('?') > 0) {
                var current = path.indexOf('?');
            }
            else {
                var current = path;
            }
            var url = $(this).attr('href');
            var currenturl = url.substring(url.lastIndexOf('.') + 1);
            if (currenturl.toLowerCase() == current.toLowerCase()) {
                $(this).addClass('active');
                var par = $(this).parent();
                par.addClass('open');
            }
        });
    });
</script>

Answer 6

试试这个......

$(function() { 
    $('#yourMenu a').each(function(){
        $current = location.href;
        $target= $(this).attr('href');
            if ( $target== $current) 
            {
                $(this).addClass('active');
            }
    });
});

Answer 7

我遇到了同样的问题，我发现添加一条额外的if语句会更容易，这样该函数可以在除满足我需要的主页之外的所有页面上触发。

$(function(){
    var url = window.location.pathname, 
        urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");         
        $('#top a').each(function(){
          if ( window.location.pathname != '/' ){
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                  $(this).addClass('active');
              } 
            }             
        });
 });

如果需要，您还可以添加else语句以在主页上显示活动链接，方法是直接定位该链接。

单击与Jquery的菜单链接时添加类激活

7 个答案: