将链接更改为活动的onclick

我对我在网站中拥有的所有网页都有一个共同标题。将链接更改为活动的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>

有什么办法可以用共同的标题做到吗？谢谢，

来源

2014-02-20 Rohit Mehra

您使用哪种服务器端语言？ – Pattle

Dublicate问题http://stackoverflow.com/questions/14476591/active-state-on-nav-after-page-refresh –

请让我知道，如果我的答案适合你或如果你有任何问题的答案。请接受我的答复作为正确的答案，如果它对您有用 - 以便其他用户可以从中受益：知道答案有效并将问题标记为已答复。 – DhruvJoshi

你想要做的是通过导航通过两个页面之间的值（状态）。申请.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

来源

2014-02-20 09:56:43 DhruvJoshi

嗨DhruvJoshi，谢谢你努力解决我的问题。您的代码非常有用。我需要你的帮助来实现这一点。但考茨链接，我猜它不适合我。我已将链接到我的网址。所以当我运行我的页面并点击任何链接时，只需要路径直到/site/statics/static_page.html。 - –

@RohitMehra我已经更新了你的案例的答案 – DhruvJoshi

非常感谢bhai。我的问题已解决。：）你是个天才。 –

您可以检查例如window.location.pathname一个比较它导航的href。含义：

var pathName = window.location.pathname; 

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

就是这样的。

来源

2014-02-20 09:57:11 drip

您不应该删除类别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 Demo

来源

2014-02-20 09:57:35

我觉得这个代码可以帮助你。

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

来源

2014-02-20 10:07:25

将链接更改为活动的onclick

回答

相关问题