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应用类

如果您的网站页面为window.location.pathname，则www.my.example.com/page1允许在域示例后面显示路径，然后它会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的{{1}}课程，而应删除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 Demo

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

将链接更改为活动的onclick

4 个答案: