How to add a class to an element using jQuery and javascript? - 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;
}
});
});

Related

Slide Toggle on link click, but keep link clickable to page

I have a "dot" navigation on a site that has one link with a submenu. Originally, I had a simple JQ function that would slideToggle() the submenu on hover but that was causing some 'bouncing' issues. So, I reverted it back to click() function.
$("#troy-dot-nav li.menu-item-81 > a").click(function(e){
e.preventDefault();
$(this).siblings('.sub-menu').slideToggle('800');
});
In doing so, I need to add the preventDefault() so the submenu would open up on click, but disable the link.
Turns out, I need to keep the link on that active to navigate to that top-level page, but can't seem to figure out the best way to go about allowing the submenu to open (on click or hover; without bouncing) and keep the menu link active.
HTML for Menu
<div class="menu-primary-container">
<ul id="troy-dot-nav" class="menu reverse-dots">
<li class="...">About</li>
<li class="... menu-item-81">
Integrated Services
<ul class="sub-menu" style="display: none;">
<li class="...">EPC & Project Services</li>
<li class="...">Pipeline Construction</li>
<li class="...">Facility Construction</li>
<li class="...">Integrity Management</li>
</ul>
</li>
<li class="...">Safety & Quality</li>
<li class="...">Careers</li>
<li class="...">Contact Us</li>
</ul>
</div>
The CSS creates the dots on the li:after. Removed extra HTML for cleaner look here.
can't you just use css to add/remove an active class and also close all / open related submenu ?
Like so :
$(document).ready(function() {
$('.link').click(function() {
// Remove the "active" class from all links
$('.link').removeClass('active');
// Add the "active" class to the clicked link
$(this).addClass('active');
// Find the corresponding sublist
var sublistId = $(this).data('sublist');
var sublist = $('#' + sublistId);
// Close all sublists
$('.sublist').hide();
// Open the corresponding sublist
sublist.show();
});
});
with that kind of html :
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<ul id="sublist-1" class="sublist">
<li>Sublist item 1</li>
<li>Sublist item 2</li>
</ul>
<ul id="sublist-2" class="sublist">
<li>Sublist item 3</li>
<li>Sublist item 4</li>
</ul>
<ul id="sublist-3" class="sublist">
<li>Sublist item 5</li>
<li>Sublist item 6</li>
</ul>

Using link to remove list items from page using HTML5 and Javascript

I am trying to create a link that will remove two list items from an ul that are above the link. I am new at this and appreciate any help!
The question is pretty vague, but this is how I would achieve something like this in JavaScript with a link.
HTML:
<ul id="my_list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
click to remove item
JavaScript:
function deleteItems() {
var item_list = document.querySelectorAll("ul#my_list li");
if (item_list.length >= 2) {
item_list[0].parentNode.removeChild(item_list[0]);
item_list[1].parentNode.removeChild(item_list[1]);
} else if (item_list.length == 1) {
item_list[0].parentNode.removeChild(item_list[0]);
}
}
var delete_link = document.getElementById('delete_items');
delete_link.onclick = deleteItems;
Codepen link here.

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'

active state menu javascript

I'm having trouble to setup the active state for my menu using URL recognition. What I'm looking to achieve is having the <a href=""> to change to <a id="active" href =""> if you're on the page it links to. This what I have done so far and it seems not working.
Let me know if you have any idea and thanks all for your help!
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
$('.ActiveMenu a[href*="'+page+'"]');
$(this).attr({ id: 'active'});});
<ul id="menu">
<li id="Link1" class="ActiveMenu">Link 1</li>
<li id="Link2" class="ActiveMenu">Link 2</li>
<li id="Link3" class="ActiveMenu">Link 3</li>
</ul>
so the issue is that your function doesn't know what $(this) is. Instead, you should set target to the correct element and then add a class to it. You shouldn't use id because you should only have one id and it should be a unique identifier, not a state. Class is better suited for it. Let me know if this works for you! :)
DEMO
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
target = $('.ActiveMenu a[href*="'+page+'"]');
$(target).addClass('active');
});
<ul id="menu">
<li id="Link1" class="ActiveMenu">Link 1</li>
<li id="Link2" class="ActiveMenu">Link 2</li>
<li id="Link3" class="ActiveMenu">Link 3</li>
</ul>
Please add/change the class name instead of Id
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
var currentPage=$('.ActiveMenu a[href*="'+page+'"]');
currentPage.addClass('active');
});
please use
$(this).attr("id","active");

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.

Categories

Resources