I have HTML
<div id="top" class="shadow">
<ul class="gprc">
<li>Home</li>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
</ul>
</div>
and JQUERY
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});
});
The problem is that when i click on the Home link all tabs are getting active class and don't understand why. I need it for the first link to not get any active class.
I'm also looking for this solution and I have tested your code. On the first approach all links are highlighted and when I click other links it is working properly. The problem was on the home page because all links are highlighted because there is "no event been received" when the page is loaded, the code will work if you send a command or by clicking each links, theoretically. To stop this behavior, I found this code to one of the answers above, add this code and change the ".sibling()" to ".previousSibling()"
$(this).parent().sibling().find('a').removeClass('active');
".sibling()" will highlighted at the end of your links change it to ".previousSibling()" so it will go to first (Li)
$(this).parent().previoussibling().find('a').removeClass('active');
Your code will be like this:
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
$(this).parent().previoussibling().find('a').removeClass('active');
}
});
});
Check this , this will only activates clicked tab , remove active for all and then add for the one clicked
$("#top a").click(function() {
$('a').removeClass('active');
$(this).addClass("active");
});
Check this
You may try this out. It will help you:
<script type="text/javascript">
$(function () {
$('#sidebar li a').each(function () {
var path = window.location.pathname;
if (path.indexOf('?') > 0) {
var current = path.indexOf('?');
}
else {
var current = path;
}
var url = $(this).attr('href');
var currenturl = url.substring(url.lastIndexOf('.') + 1);
if (currenturl.toLowerCase() == current.toLowerCase()) {
$(this).addClass('active');
var par = $(this).parent();
par.addClass('open');
}
});
});
</script>
You're running a foreach loop on all <a> tags within your #top div. So of course it'll add the class active to all of them.
I think what you're trying to do is this: http://jsfiddle.net/rLddf/4/
I used the click event instead.
edit switched link to Kristof Feys example - more efficient.
try this...
$(function() {
$('#yourMenu a').each(function(){
$current = location.href;
$target= $(this).attr('href');
if ( $target== $current)
{
$(this).addClass('active');
}
});
});
I came across the same issue and I found it easier to just add an additional if statement so that the function would fire on all pages except the home page which met my needs.
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('#top a').each(function(){
if ( window.location.pathname != '/' ){
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('active');
}
}
});
});
You could also add in an else statement to show an active link on the homepage by targeting the link directly if required.
I think you need something like this:
$(function () {
$("#top a").click(function(e){
e.preventDefault();
$(this).addClass('active');
$(this).parent().siblings().find('a').removeClass('active');
});
});
Fiddle Demo
Related
I have the following HTML menu:
<div class="nav">
<ul>
<li class="first">Home</li>
<li>Something</li>
<li>Else</li>
<li class="last">Random</li>
</ul>
<ul style="float:right;">
<li class="first last">News</li>
</ul>
</div>
</div>
And then I have this code:
jQuery(function($){
var current = location.pathname;
$('.nav ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
The code is working great, but it has a problem. For example, if I see the Home page (www.example.com) then all of the menu links receives the active class. Another problem would be that it works great for www.example.com/something but it doesn't keep it active if I go to www.example.com/something/1 etc. Any idea how to fix this? Thanks in advance!
For home page add extra class 'default' in list like.
<li class="first default">Home</li>
jquery code.
jQuery(function($){
var current = location.pathname;
console.log(current);
//remove the active class from list item.
$('.nav ul li a').removeClass('active');
if(current != '/'){
$('.nav ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if(current.indexOf($this.attr('href')) !== -1 && $this.attr('href') != '/'){
$this.addClass('active');
}
})
}else{
console.log('home');
$('.default a').addClass('active');
}
})
Use the below jQuery code to add active class:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
$(".nav ul li a").each(function() {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
$(this).addClass("active");
})
});
By using indexOf(), you are checking if the link's target is the same the current location.
What you want is not "the same URL" but "the same pattern", so I would tend to use a regular expression :
let re = new RegExp("^" + $(this).attr("href") + ".*");
if (re.test($current)) {
$(this).addClass("active");
}
Note that this would force you to create a separate solution for your link to the main page, else it would always be active.
I developed a navigation bar. I just add an active class for links that highlight the current link. The strange thing is that the feature is working on my local pc perfectly. I just uploaded it to my server and check, but it's not working at all.
This is the uploaded site
This is the script that I used.
$(function () {
var url = window.location;
$('ul.active-link a[href="' + url + '"]').parent().addClass('active');
$('ul.active-link a').filter(function () {
return this.href == url;
}).parent().addClass('active');
});
<script>
$(document).ready(function () {
var location = window.location.href;
$('#nav li a').each(function(){
if(location.indexOf(this.href)>-1) {
$(this).parent().addClass('active');
}
});
});
I want to add class in link if previous link was home link i am trying so hard but I am not getting the answer of it.
it is simple nav bar, if active link home then clicked link will be added a class..thats it
$('ul li').click(function(){
var prevLink = ??; // how can i get prevLink here
if(prevLink == 'Home') {
$(this).addClass("addext");
$('ul li').removeClass("addext");
}
});
how to check previous active link ?
Hope this will help:
var globalPrevLink = "";
$('#Home').onclick(function(){
globalPrevLink = window.location.href; // this is clicked last time so remember it in globalPrevLink variable
});
Put above code somewhere in your js and change Home to whatever ID you have given to your home link tag.
then change your code as
$('ul li').click(function(){
var prevLink = globalPrevLink; // globalPrevLink is assigned here
if(prevLink == 'Home') { // change this also as accordingly, use console log
$('ul li').removeClass("addext"); // switch as suggested in other comment
$(this).addClass("addext");
}
});
Not the complete answer, because of your missing html, but you should switch these two lines:
$(this).addClass("addext");
$('ul li').removeClass("addext");
To:
$('ul li').removeClass("addext");
$(this).addClass("addext");
Otherwise you set, and instant remove the class.
Use $('ul li.addext').text(); to get the li text which has addest class
$('ul li').click(function(){
var prevLink = $('ul li.addext').text();
if(prevLink == 'Home') {
$('ul li').removeClass("addext");
$(this).addClass("addext");
}
});
I'm using following code for my bootstrap tabs in order to have the #name of the tab in the url, as I want to redirect to a specific tab once some post actions are done, which works fine.
However, ever since I started using the code, all the other links stopped doing anything, it doesn't open the page or display an error, nothing at all.
Here's my code :
$(function() {
var gotoHashTab = function (customHash) {
var hash = customHash || location.hash;
var hashPieces = hash.split('?'),
activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
}
// onready go to the tab requested in the page hash
gotoHashTab();
// when the nav item is selected update the page hash
$('.nav a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash
//location.hash = $(e.target).attr('href').substr(1);
scrollTo(0,0);
})
// when a link within a tab is clicked, go to the tab requested
$('.tab-pane a').click(function (event) {
if (event.target.hash) {
e.preventDefault();
gotoHashTab(event.target.hash);
}
})
$('.tab-pane a').on('click', function(e){
e.preventDefault()
})
});
I've noticed on some other questions, that e.preventDefault() may cause that, but when I comment those out nothing happens.
How to rewrite the code to keep functionality but make those normal links work again ?
It's looking at all the links with this:
activeTab = $('[href=' + hashPieces[0] + ']');
Change to:
activeTab = $('.tab-pane [href=' + hashPieces[0] + ']');
And also try being more specific with the .nav, since .nav is default for all navs. So this:
$('.nav a').on('shown.bs.tab', function (e) {
Should change to:
$('.tab-pane a').on('shown.bs.tab', function (e) {
I'm trying to do this in javascript but more optimized and with toggle function working !
My js code :
$(document).ready(function() {
$('a.details').click(function(e){
var id= '';
$('a.details').each(function() {
id = $(this).attr('href');
$('#'+id).hide();
});
$(this).addClass('active');
id = $(this).attr('href');
$('#'+id).toggle();
e.preventDefault();
});
});
Here is my take on this WITHOUT changing the html except for adding a t to the ID of the rows
http://jsfiddle.net/mplungjan/Rfn8z/
Comments welcome (especially if voting down)
$(document).ready(function() {
$('a.details').each(function() {
var tr = $("#t"+parseInt($(this).html()));
var link = this;
$(this).toggle(
function(e){tr.show(); $(this).addClass('active'); e.preventDefault();},
function(e){tr.hide(); $(this).removeClass('active');e.preventDefault();}
);
});
});
Terrible way of doing things. Instead take a look at this:
http://jsfiddle.net/xzpkq/
Maybe you will be inspired to produce better code