admin管理员组文章数量:1320652
I have a mon header for all of the pages I have in my site.
When I click on any link it takes me to that page and the page gets refreshed.
But the header is the same as it was in the previous page.
What I want is that when I click on any link, that link gets bold(Active) and if I am on homepage the home link should be active by default.
I am trying to work on this and when I click on any link the link gets active(bold) but as the page gets refresh and take me to the new page the link es to non active(normal).
Here is my code.
<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>
Is there any way we can do it with the mon header? Thanks,
I have a mon header for all of the pages I have in my site.
When I click on any link it takes me to that page and the page gets refreshed.
But the header is the same as it was in the previous page.
What I want is that when I click on any link, that link gets bold(Active) and if I am on homepage the home link should be active by default.
I am trying to work on this and when I click on any link the link gets active(bold) but as the page gets refresh and take me to the new page the link es to non active(normal).
Here is my code.
<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>
Is there any way we can do it with the mon header? Thanks,
Share Improve this question edited Nov 25, 2015 at 1:21 Josh Crozier 241k56 gold badges400 silver badges313 bronze badges asked Feb 20, 2014 at 9:49 Rohit MehraRohit Mehra 2294 silver badges15 bronze badges 3- What server side language are you using? – Pattle Commented Feb 20, 2014 at 9:54
- Dublicate question stackoverflow./questions/14476591/… – Rakesh Kumar Commented Feb 20, 2014 at 9:56
- Please let me know if my answer worked for you or if you have any issues with the answer. Please accept my reply as correct answer if it worked for you- so that other users can benefit: from knowing that the answer works and by having the question marked as Answered. – DhruvJoshi Commented Feb 20, 2014 at 15:25
4 Answers
Reset to default 3What you want to do is to pass values(state) between two pages via navigation. The best way to apply .active
to your current page is by checking what page you are on and then applying class via jquery
The window.location.pathname
allows for path after the domain example if your site page is www.my.example./page1
then it gives path1
Watch out for plicated cases like www.my.example./category/page1
then it gives category/path1
A code like this would work. Also see fiddle link here http://jsfiddle/52Aqu/10/
$(window).load(function(){
var checkvalue= window.location.pathname;
//alert(checkvalue);
$("a").each(function(){
if($(this).attr('href')== checkvalue)
{ $(this).addClass("active");}
});
});
For you case when you actually want to check against the query parameter in url and query parameter in href,try this code:
$(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");}
});
});
Here location.search
property provides query parameters from URL. Example if page url is www.example./sites/statics/static_page.html?name=global/canada/index
the location.search
will have value ?name=global/canada/index
and we check this against the split value from href
You can check for example the window.location.pathname
an pare it to the href of the navigation. Meaning:
var pathName = window.location.pathname;
$('nav a').each(function() {
var $self = $(this);
if($self.attr('href') ==pathName){
$self.addClass('active');
}
})
Something like that.
You should not remove the class active
of a
but of .active
. Basically this clears all the classes .active
so that you can set it to the currently clicked link.
Script would look like:
<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
I Think this code can help you.
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
};
});
本文标签: javascriptChange link to active onclickStack Overflow
版权声明:本文标题:javascript - Change link to active onclick - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742066052a2418840.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论