Develop Reference

Add class to another page attribute using URL id - Jquery

I have attached id with URL. Ex: When I click Link 1, it has #tab-2 id and it takes me to landing page. In landing page I have find which element has #tab-2 id then i have to add class .active.
I tried but no luck. Please any one correct my code. Thanks
JS Fiddle link
HTML
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
Landing Page
<div class="tab">
<ul>
<li><a id="tab-2" class="active" >LINK 1 Content</a></li>
<li><a id="tab-44" >LINK 2 Content</a></li>
<li><a id="tab-74" >LINK 3 Content</a></li>
</ul>
</div>
Jquery
$(document).ready(function(){
$(".menu ul li a").each(function(){
var url = window.location.pathname;
var id = url.substring(url.lastIndexOf('/') + 1);
var land = $('.tab').find("id");
if( land == id ) {
$('this').addClass('active');
}
})
});

Assuming I've understood your requirement, you can retrieve the hash value from the URL of the page using window.location.hash. You can then use that to directly select the required element and add a class to it on load of the new page:
$(function() {
var id = window.location.hash; // = '#tab-2', in your first link.
$(id).addClass('active');
});

Try this:
http://www.w3schools.com/jsref/prop_loc_hash.asp
$(document).ready(function(){
var hash = window.location.hash;
$(hash).addClass('active');
});
I hope it helps.

Replace $('this').addClass('active'); by $(this).addClass('active');
if( land == id ) {
$(this).addClass('active');
}

Use event.preventDefault it prevents the default action and Use window.location.hash to getting the hash element in the url
$(".menu ul li a").click(function(event){
event.preventDefault();
var url = window.location.hash;
$(".tab ul li a").removeClass('active');
$(url).addClass('active');
})

How to add .current class to parent li using jquery

I was wondering if someone can help me. I trying to add .current class to the active parent in my navigation.
Here is my navigation:
<ul id="top-nav">
<li>Home</li>
<li>About
<ul id="about-dropdown" class="dropdown">
<li>Sub Cat</li>
<li>Sub Cat 1</li>
<li>Sub Cat 2</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
I have managed to get the .current class to display on the current page but when the user is on a sub page, eg. "Sub Cat 1" I want the "About" a tag to add the .current page.
Here is my Jquery:
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('#top-nav a').each(function(){
// and test its normalized href against the url pathname regexp
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('current');
}
$(document).ready(function(){
$("li.current").parent().addClass("current");
});
$(document).ready(function(){
$("ul.current").parent().addClass("current-parent");
});
If anyone can help it would be appreciated :-)
Thanks

<ul id="top-nav">
<li>Home</li>
<li>About
<ul id="about-dropdown" class="dropdown">
<li>Sub Cat</li>
<li>Sub Cat 1</li>
<li>Sub Cat 2</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
JavaScript
$('#top-nav li a').hover(function(){
$(this).addClass('current');
}).mouseleave(function(){
$(this).removeClass('current');
});
$('#about-dropdown').hover(function(){
$(this).prev().addClass('current');
}).mouseleave(function(){
$(this).prev().removeClass('current');
});
CSS
.current{
background: #F00;
}
Fiddle
http://jsfiddle.net/7LzLk8aw/

I think what you want is the parents() function:
$(document).ready(function(){
$("li.current").parents('#top-nav > li').addClass("current");
});
If you only want the top level item use the selector above. If you want all parents use '#top-nav li'

How to add a class to an element using jQuery and javascript?

I have the HTML code as given below to add the navigation to my site. (Note that the list is nested)
<div id="navigation">
<ul>
<li>Home</li>
<li>About us</li>
<li>Help</li>
<li>DropDown
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li class="last">A Last Link Text</li>
</ul>
</div>
I want to show the currently active page link in new color. So the corresponding list item should have the class active and I use the CSS to change the color. For example, if the default.html is the currently opened page, the code should be <li class=“active”>Home</li>.
How to do that in jQuery and JavaScript (I need both for two different websites).
Can anyone help me?
Thanks for your help.

Get your URL / Parse it:
var pathname = window.location.pathname;
Then add the class:
Jquery:
$(element).addClass('classname');
JS: How do I add a class to a given element?

Try this
$(document).ready(function () {
var url = location.href;
$('#navigation li a').each(function () {
var thisHref = this.getAttribute('href');
if (thisHref !== '#' && url.indexOf(thisHref) !== -1) {
$(this.parentNode).addClass('active');
return;
}
});
});

Comparing URL to links

I have the following HTML:
<ul class="vertical_menu no_select">
<li class="edge_top"> </li>
<!-- Menu Items Here -->
<li class="not_selected"><a class="selection_link" href="index.htm">Home</a></li>
<li class="not_selected"><a class="selection_link" href="index.htm">Subitem 1</a></li>
<li class="not_selected"><a class="selection_link" href="index.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li class="edge_bottom"> </li>
</ul>
Now, the links with the class "selection_link" need to have the li element (their parent) to have a new class "selected" if the current url matches the href value inside of the anchor tag. I can get the full URL but I don't know how to use that to help seeing as there could be more than one page with the same name at different directory levels.
Thanks if you can help! I'm using jQuery with all of this so feel free to provide me with jQuery examples!

Check out the jsFiddle. This should do the trick:
$("ul.vertical_menu li a").each(function() {
if (this.href == window.location.href) {
$(this).parent().toggleClass("not_selected selected");
}
});

$('.selection_link').each(function() {
if($(this).attr('href') === window.location.pathName.substring(1)) {
$(this).parent().attr("class", "selected");
}
});
not tested, but it'll it should start you off. substring is because pathname starts with '/' you could just put that in your href's too

or this...
$('.vertical_menu a').each(function() {
if (location.href.search(this.attr('href')) != -1) {
$(this).parent().addClass('selected');
}
});

Get next a tag in nested ul tree

I have a nested unordered list representing a tree hierarchy. There can be many deeply nested ul tags in the unordered list. Very simple example:
<ul>
<li>Link
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Link
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
As you can see, some links can have class "allowed". When a link like that is clicked, I would like to get a next a tag in the tree and if it has class "disallowed", change it to "allowed".
How can I get the next a tag in the tree?
UPDATE:
What I mean. Before:
<ul>
<li>Link
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Link<!-- this gets clicked on -->
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
HTML changes to this:
<ul>
<li>Link
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Link
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
And so on.

$('.allowed').live(function() {
var links= $('a');
var ix= links.index(this);
if (ix!==-1 && ix<links.length-1)
links.eq(ix+1).removeClass('disallowed').addClass('allowed');
});
this uses live() to catch clicks, assuming that after after a link is changed to class="allowed", clicking that should perform the same action
it looks for the next link on the whole page. If you only want to check inside a particular container, use that as the parent to find links in, eg. var links= $('#myul a');, for efficiency and to prevent it affecting other page links

$(document).ready(function() {
var el = null;
$('ul li a.allowed').click(function(){
el = $(this);
while($(el).closest('.ul')){
el = $(el).closest('.ul');
var a = $(el).find('li a.disallowed:first');
if(a){
$(a).removeclass('disallowed').addClass('allowed');
return true;
}
}
});
});

$(function(){
$('ul li a').click(function(){
if ($(this).is('.allowed')) {
var nextElem = $(this).next('ul').length?$(this).next('ul'):$(this).closest('li').next('li');
nextElem.find('a:first').
filter(function(){
return $(this).is('.disallowed');
}).
removeClass('disallowed').
addClass('allowed');
}
return false;
});
});
Phew! demo

you could do something like
$('a.allowed').click(function(){
$(this).next().find('a:first').attr('class', 'allowed');
});
this will make all the a tags under the ul next to the a link that was clicked have a class allowed.