将链接更改为活动的onclick

Question

对于网站中的所有页面，我都有一个通用的标题。

当我单击任何链接时，它将带我到该页面，并且页面会刷新。

但是标题与上一页相同。

我想要的是，当我单击任何链接时，该链接将变为粗体（有效），并且如果我在主页上，则默认情况下，主页链接应处于活动状态。

我正在尝试解决此问题，当我单击任何链接时，该链接变为活动（粗体），但是当页面刷新并带我到新页面时，该链接变为非活动（正常）。

这是我的代码。

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

有什么办法可以使用通用标头呢？ 谢谢，

Answer 1

您想要做的是通过导航在两个页面之间传递值（状态）。 将.active应用于当前页面的最佳方法是检查您所在的页面，然后通过jquery应用类

如果您的网站页面为www.my.example.com/page1则window.location.pathname允许在域示例之后添加路径，然后提供path1注意诸如www.my.example.com/category/page1之类的复杂情况，然后给出category/path1

这样的代码将起作用。 另请参阅此处的小提琴链接http://jsfiddle.net/52Aqu/10/

$(window).load(function(){
   var checkvalue= window.location.pathname;
   //alert(checkvalue);
   $("a").each(function(){
                        if($(this).attr('href')== checkvalue)
                         { $(this).addClass("active");}
                         });

                    });

对于您这种情况，当您实际上要对照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的查询参数。 如果页面网址为www.example.com/sites/statics/static_page.html?name=global/canada/index的示例， location.search值将为?name=global/canada/index

然后对照href中的分割值检查

Answer 2

您可以检查例如window.location.pathname并将其与导航的href进行比较。 含义：

var pathName = window.location.pathname;

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

这样的事情。

Answer 3

你不应该删除类active的a ，但.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>

JSFiddle演示

Answer 4

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

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