2

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

问题是，当我单击主页链接时，所有选项卡都变得活跃，不明白为什么。我需要它作为第一个链接没有任何活动课程。

4

7 回答 7

3

选中此项，这只会激活单击的选项卡，删除所有活动，然后添加单击的选项卡

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

检查这个

于 2013-10-28T15:58:16.510 回答
3

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

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

“.sibling()”将在您的链接末尾突出显示，将其更改为“.previousSibling()”，因此它将转到第一个 (Li)

$(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');
        }
    });    
});
于 2015-05-09T16:33:12.427 回答
1

你可以试试这个。它将帮助您：

<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>
于 2015-01-08T06:52:03.153 回答
0

您正在对divforeach中的所有<a>标签运行循环。#top因此，它当然会将类添加active到所有这些中。

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

我改用了这个click事件。

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

于 2013-10-28T15:54:37.073 回答
0

尝试这个...

$(function() { 
    $('#yourMenu a').each(function(){
        $current = location.href;
        $target= $(this).attr('href');
            if ( $target== $current) 
            {
                $(this).addClass('active');
            }
    });
});
于 2016-12-09T00:32:32.117 回答
0

我遇到了同样的问题，我发现添加一个额外的 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 语句以在主页上显示活动链接。

于 2018-11-08T04:57:39.983 回答
-1

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

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

小提琴演示

于 2013-10-28T16:00:42.203 回答