Javascript 将链接更改为活动onclick

我的站点中所有页面都有一个公共标题

当我点击任何链接时，它会将我带到该页面，页面就会刷新

但标题与上一页中的标题相同

我想要的是，当我点击任何链接时，该链接变为粗体（活动），如果我在主页上，默认情况下主页链接应该是活动的

我正在尝试处理这个问题，当我点击任何链接时，链接会变为活动（粗体），但当页面刷新并将我带到新页面时，链接会变为非活动（正常）

这是我的密码

<script type='text/javascript'>
$(window).load(function(){
$("#main-menu a").click(function() {
    $('a').removeClass('active');
    $(this).addClass("active");
});
});>  
</script>
<style>
.active {font-weight:bold}
</style>
<!--Navigation-->
    <nav id="main-menu">
        <ul class="right">
        <li><a href="#">Home</a></li>                                    
        <li><a href="#">Test Link 1</a></li>
        <li><a href="#">Test Link 2</a></li>
        <li><a href="#">Test Link 3</a></li>
    </ul>
      </nav>

$（窗口）。加载（函数（）{
$（“#主菜单a”）。单击（函数（）{
$（'a'）.removeClass（'active'）；
$（此）.addClass（“活动”）；
});
});>  
.active{font-weight:bold}

我们有没有办法用公共标题来做这件事？

---

谢谢，

您要做的是通过导航在两个页面之间传递值（状态）。将

.active

应用到当前页面的最佳方法是检查您所在的页面，然后通过jquery应用类

window.location.pathname

允许域示例后面的路径，如果您的站点页面是

www.my.example.com/page1

，则它会给出

path1

注意复杂的情况，如

www.my.example.com/category/page1

，然后它会给出

category/path1

这样的代码可以工作。也可以在这里看到fiddle链接

如果您确实想检查url中的查询参数和href中的查询参数，请尝试以下代码：

$(window).load(function(){
   var checkvalue= window.location.search;
   //alert(checkvalue);
   $("a").each(function(){
                        var hrefvalue="?" + $(this).attr('href').split("?")[1];
                       //alert(hrefvalue)
            if(hrefvalue== checkvalue) { $(this).addClass("active");}
                         });
                    });

此处

location.search

属性提供URL中的查询参数。示例：如果页面url为

www.Example.com/sites/statics/static\u page.html？name=global/canada/index

则

位置。搜索将具有值
？name=global/canada/index

我们将其与href中的分割值进行比较，例如，您可以检查
window.location.pathname，并将其与导航的href进行比较。意思是：

var pathName = window.location.pathname;

$('nav a').each(function() {
    var $self = $(this);
    if($self.attr('href') ==pathName){
        $self.addClass('active');
    }
})

诸如此类。
您不应该删除
a
的类
active
，而应该删除
.active的类。基本上，这会清除所有类
.active
，以便您可以将其设置为当前单击的链接

脚本将如下所示：

<script type='text/javascript'>
$(window).load(function(){
$("#main-menu a").click(function() {
    $('.active').removeClass('active');
    $(this).addClass("active");
});
});>  
</script>
<style>
.active {font-weight:bold}
</style>
<!--Navigation-->
    <nav id="main-menu">
        <ul class="right">
        <li><a href="#">Home</a></li>                                    
        <li><a href="#">Test Link 1</a></li>
        <li><a href="#">Test Link 2</a></li>
        <li><a href="#">Test Link 3</a></li>
    </ul>
</nav>


$（窗口）。加载（函数（）{
$（“#主菜单a”）。单击（函数（）{
$（'.active'）.removeClass（'active'）；
$（此）.addClass（“活动”）；
});
});>  
.active{font-weight:bold}







我认为这段代码可以帮助您

var url = document.location.href;  // Getting the url
var str = url.substr(0, url.lastIndexOf('/')); // get the specific url
var nUrl = url.substr(url.lastIndexOf('/')+1); // Get the page name from url

$('#menu li a').each(function(){
    if( $(this).attr('href') === nUrl){ // Comparing if we on the same page or not
        $(this).addClass('active'); // applying the class on the active page
    };
});

您使用的服务器端语言是什么？简单的问题请告诉我我的答案是否适合您，或者您对答案是否有任何问题。如果我的回答对您有效，请接受我的回答为正确答案-这样其他用户可以从中受益：知道答案有效并将问题标记为已回答。您好DhruvJoshi，感谢您努力解决我的问题。你的代码非常有用。我需要你的帮助来实现这一点。但是因为我想这对我不起作用。我已经像这样链接了我的url。因此，当我运行我的页面并点击任何链接时，它只需使用/site/statics/static_page.html路径即可非常感谢你，拜。我的问题解决了。：）你是个天才。你能看到我的一个问题吗。如果我在同一页面上单击任何其他链接，我的标题链接将变为非活动链接，但当我单击任何标题链接时，例如：-测试链接1、测试链接2、测试链接3，其工作状态非常好。谢谢像这样，我的页面左侧有一个链接@RohitMehra我在回答中给出的代码将通过页面上的所有链接进行检查。因此，如果您单击一个侧链接，页面将重新加载新的url，如
www.example.com/sites/statics/static\u page.html？name=global/canada/primary-oem-p‌​artnerships
现在，如果此链接出现在页面的任何位置，它将被匹配并获得
活动的
CSS类。请注意，在这种情况下，没有标头与新路径匹配，因此不会获得CSS类。现在是否要添加一些规则，即如果文件路径与任何头链接都不匹配，则默认情况下，某些头应处于活动状态
var url = document.location.href;  // Getting the url
var str = url.substr(0, url.lastIndexOf('/')); // get the specific url
var nUrl = url.substr(url.lastIndexOf('/')+1); // Get the page name from url

$('#menu li a').each(function(){
    if( $(this).attr('href') === nUrl){ // Comparing if we on the same page or not
        $(this).addClass('active'); // applying the class on the active page
    };
});