Add class to active menu items with internal anchors - javascript

I have a page with a list of menu items consisting of internal anchors. I'm trying to add an .active class to the selected item. It seems to work on load but when clicking a new item in that same page it doesn't.
When clicking a new menu item, I would like to remove all other active classes and add this class to the clicked item.
Sounds pretty simple, but I can't make it work.
I created this Fiddle, but it doesn't show the issue correctly, since I can't add hashes to the url.
However, maybe someone can point me in the right direction.
JS:
function setActiveLinks() {
var current = location.pathname;
$('.bs-docs-sidenav li a').each(function() {
var $this = $(this);
// Get hash value
var $hash = location.href.substr(location.href.indexOf('#') + 1);
if ($this.attr('href') == '#' + $hash) {
$this.parent().addClass('active');
}
})
}
setActiveLinks();
$('#leftmenu li a').click(function() {
$('#leftmenu li').removeClass('active');
setActiveLinks();
});
HTML:
<ul class="nav bs-docs-sidenav">
<li>
Download
</li>
<li class="active">
What's included
<ul class="nav">
<li class="active">Precompiled</li>
<li>Source code</li>
</ul>
</li>
<li>
Compiling CSS and JavaScript
<ul class="nav">
<li>Installing Grunt</li>
<li>Available Grunt commands</li>
<li>Troubleshooting</li>
</ul>
</li>
</ul>
Thanks. :-)

You have wrong selector to bind click event on anchor element. also you don't need to call setActiveLinks() function(which sets class based on href) here.
You can use context of clicked anchor element to traverse to parent li and add class active in it:
var $navLIs = $('.nav li')
$navLIs.find('a').click(function() {
$navLIs.removeClass('active');
$(this).parent().addClass('active');
});
Working Demo

Related

Trigger active class of parent link when on child link page

I have the javascript code below to put my parent menu item to class active when I'm on the page for example https://stackoverflow.com/questions/ it works. But I also wanna put the parent menu item to class active when I'm at the subpages/child menu item like https://stackoverflow.com/questions/ask/, may I know how to do that?
Example I'm at this page https://stackoverflow.com/questions/ask/, how to I get the URL like this https://stackoverflow.com/questions/, without the /ask so that I can have the parent menu item (question) to be in active class when I'm at the child page of question which is (ask).
The code below only works if I'm at https://stackoverflow.com/questions/, but if I'm at the child page https://stackoverflow.com/questions/ask/, parent link (https://stackoverflow.com/questions/) doesn't change to active class.
<ul class="nav navbar-nav">
<li><h5>Home</h5></li>
<li class="dropdown">
<h5>Online<span class="caret"></span></h5>
<ul class="dropdown-menu" role="menu">
<li>History</li>
<li>Science</li>
<li>Mathematics</li>
<li>English</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var url = window.parent.location.href;
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
</script>
You can use parents() to match the parent and all ancestors. Give it a selector argument to restrict to just the li tags.
$('ul.nav a').filter(function() {
return this.href == url;
}).parents('li').addClass('active');

How to Remove a Class from a Sibling of a Parent

I'm working with the off-canvas script from Foundation and it isn't working out of the box (of course) when I try to use the submenu options. I realized it wasn't adding a class (move-right) to the ul's of the li's in the off-canvas navigation. So I wrote a script to add that class which can be found here:
jQuery(document).ready(function() {
jQuery('ul.off-canvas-list li a').click(function() {
jQuery('ul.off-canvas-list li ul.left-submenu').addClass('move-right');
});
});
And here is how my HTML is structured:
<ul class="off-canvas-list">
<li class="has-submenu">Name 1
<ul class="left-submenu">
<li class="back">Back</li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</li>
<li class="has-submenu">Name 2
<ul class="left-submenu">
<li class="back">Back</li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</li>
<li class="has-submenu">Name 3
<ul class="left-submenu">
<li class="back">Back</li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</li>
...etc
</ul>
My problem is that my script is adding the class to ALL ul.left-submenu's instead of just the one directly under the li that I click on. I can't figure out how to add the class 'move-right' to only the 'ul.left-submenu' child of the parents li that I clicked on and remove the 'move-right' class from the other 'ul.left-submenu'
I thought maybe using the sibling() selector, but I wasn't quite sure how to implement that into my script. Any and all help is greatly appreciated.
Another issue has arose and that is being able to close the opened "ul.left-submenu" by clicking on the "Back" which comes before the other li's in each ul.left-submenu. I updated the HTML above to include the "" and also have provided the script below that I tried using that hasn't worked.
jQuery('li.back').on('click', function() {
console.log('close submenu');
jQuery('ul.left-submenu').removeClass('move-right');
});
The target element is the grandparent of the clicked element so you can use the closest method:
$('ul.off-canvas-list li a').click(function() {
$('.move-right').removeClass('move-right');
$(this).closest('ul.left-submenu').addClass('move-right');
});
you can add it directly to the clicked element by using this
jQuery(document).ready(function() {
jQuery('.left-submenu li a').click(function() {
jQuery('.left-submenu').removeClass('move-right'); // remove class move-right from every elements with class left-submenu
jQuery(this).parents('.left-submenu').addClass('move-right'); // add class move-right to the parent with class left-submenu of current element
});
});
Edit:
if in your updated code, you want to click only by a right after .has-submenu, you need this probably, so it didn't trigger on click for a inside .left-submenu
jQuery(document).ready(function() {
jQuery('.has-submenu > a').click(function() {
jQuery('.left-submenu').removeClass('move-right'); // remove class move-right from every elements with class left-submenu
jQuery(this).children('.left-submenu').addClass('move-right'); // add class move-right to the children with class left-submenu of current element
});
});
sorry for my mistakes not looking again for the code before posting it, because ul.left-submenu is in the same position with a and not it's children, you need to use .siblings to get ul.left-submenu, so change the code to this
jQuery(document).ready(function() {
jQuery('.has-submenu > a').click(function() {
jQuery('.left-submenu').removeClass('move-right');
jQuery(this).siblings('.left-submenu').addClass('move-right');
});
});
here's the working Example in Fiddle
Ok, so you want to add a class move-right to the ul.left-submenu that is directly under the has-submenu li that you clicked, right?
So:
$(document).ready(function() {
//Trigger the click only on the li's has-submenu
$('li.has-submenu').on('click', function() {
//Remove the class from other ul, if there's any
$('ul.left-submenu').removeClass('move-right');
//Finds the direct ul child using the '>' selector, and adds the class.
$(this).find('> ul.left-submenu').addClass('move-right');
});
});
The way you have your selector it targets all the ul.left-submenu elements you have, another way to target just the element clicked would be like this:
$('.off-canvas-list').on('click', 'ul.off-canvas-list li a', function (){
$('.move-right').removeClass('move-right');
$(event.target).closest('ul.left-submenu').addClass('move-right');
});
Your selector is too broad. If what you want to do is to add move-right to left-submenu when you click has-submenu, that's what you need to do:
$('.has-submenu').click(function() {
$(this).find($('.left-submenu')).addClass('move-right');
});
Fiddle: http://jsfiddle.net/x9zcav0p/
If you need to reset move-right, do this:
$('.has-submenu').click(function() {
$('.move-right').removeClass('move-right');
$(this).find($('.left-submenu')).addClass('move-right');
});
Fiddle: http://jsfiddle.net/x9zcav0p/1/
Updated markup:
For your updated markup, you can target the next() element after the anchor tag:
$('.has-submenu > a').on('click', function() {
$('.move-right').removeClass('move-right');
$(this).next().addClass('move-right');
});
Fiddle: http://jsfiddle.net/x9zcav0p/2/

Add a link to existing menu - no access to change HTML

Is there a way i can add an additional link to an existing menu, where i don't have the ability to change the HTML of the menu , but i am granted access to add javascript/jquery to the site ?
Here is the current HTML of the menu
<div id="hsubmenu">
<ul id="hsubmenuitems">
<li>Home</li>
<li>Live Scoring</li>
<li>Standings</li>
<li>Power Rank</li>
<li>Schedules</li>
<li>Message Board</li>
<li>Playoffs</li>
<li>Players Stats</li>
<li>League History</li>
<li>Transactions</li>
</ul>
</div>
I'd like to add another menu item to the end
<li>Rosters</li>
Yep, you can do this
var li = $('<li>') //Create new li item
li.append('Rosters') //Add href
$("#hsubmenuitems").append(li); //Add this li item with href to "hsubmenuitems"
$().ready(function(){
$('<li>Rosters</li>').appendTo('#hsubmenuitems');
});
http://jsfiddle.net/jk63F/
You can edit the innerHTML of the element to append your new item.
var listElement = document.getElementById('hsubmenuitems');
listElement.innerHTML += '<li>Rosters</li>';
With jQuery the syntax is a little shorter.
$("#hsubmenuitems").append('<li>Rosters</li>');

How to dynamically add a class to li item and change its background color using javascript and css

Here I have a list, what I want to do is I need to change the list ( li ) background color to different one after click on a specific list item. the thing is once it click on the link page will be redirected and refresh. please can me suggest a solution for to get this done?
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile">My Profile</li>
<li id="menu-dashboard">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
what i did for this :
Java Script :
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
)
//Add the clicked button class
$(this).addClass('active');
}
//Attach events to menu
$(document).ready(
function()
{
$("#main-menu li").click(make_button_active);
}
)
CSS :
#main-menu-list li.active {
background: #0040FF;
}
It's a little difficult to tell exactly what you want to do, but here's some quick and dirty (and untested) code:
/// when we click on an `a` tag inside the `#main-menu-list`...
$('#main-menu-list').on('click', 'a', function(e) {
// stop the link from firing
e.preventDefault();
e.stopPropagation();
// change the list item's background to green
$(this).closest('li').addClass('myClassName').css('background-color', 'green');
// do anything else, e.g. load in pages via ajax...
});
You could use CSS to apply the green background color, instead of jQuery:
.myClassName { background-color: green; }
This will stop the page from navigating, and I don't know if that's your intention. If you want to check the currently-loaded page against the menu to find the current item, you could do this (on page load) instead:
var currentPage = window.location.pathname;
$('#main-menu-list').find('a[href^="' + currentPage + '"]').closest('li').addClass('active');
EDIT:
Your amended Javascript code can be simplified to the following:
$('#main-menu li').on('click', 'a', function (e) {
e.preventDefault();
e.stopPropagation();
// only do the following if the clicked link isn't already active
if(!$(this).closest('li').hasClass('active')) {
$(this).closest('ul').find('.active').removeClass('active');
$(this).closest('li').addClass('active');
// load in your content via ajax, etc.
}
});
JSFiddle example
For each page you can add a class to the current list item that has "where the user is"..
CSS:
.selectedItem{
background-color: orange;//whatever color your want for the selected tab..
}
Then for each of your pages,
say you're in Dashboard.html
your menu code will look like:
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile">My Profile</li>
<li id="menu-dashboard" class="selectedItem">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
in profile.html:
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile" class="selectedItem">My Profile</li>
<li id="menu-dashboard">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
and so on..
You need to change the background color when the document is loaded (i.e. in document.ready).
Then you need a mechanism to connect the currently loaded page to one of your list items.
$(document).ready(function(){
//get the url from the current location or in some other way that suits your solution
//perhaps use window.location.pathname
var moduleId = "dashboard" // hardcoded to dashboard to make the point :);
$("#menu-"+moduleId).css("background-color", "#ccc");
});
http://jsfiddle.net/9JaVn/1/

id manipulation in jQuery

Say I have a unordered list of item1, item2, item3, item4, each with a div around it.
<ul>
<div><li>item1</li></div>
<div class="current"><li>item2</li></div>
<div><li>item3</li></div>
<div><li>item4</li></div>
</ul>
I want that every time I click itemX, it loads itemX.html and give the div around itemX a current class attribute. Currently I'm writing 4 functions separately for four items, and they look almost the same. So how can I write a general function that just works on any itemX, loads itemX.html and changes its div's attribute? My current code seems so redundant.
Assuming that you've fixed the HTML problem(li should be sub element of ul). But still for such problem, you need to do:
$("li").click(function() {
$(".current").removeClass("current");
$(this).parent().addClass("current");
});
But the correct solution is :
HTML :
<ul>
<li>item1</li>
<li class="current">item2</li>
<li>item3</li>
<li>item4</li>
</ul>
JS:
$("li").click(function() {
$(".current").removeClass("current");
$(this).addClass("current");
});
And add some css to your li
Your HTML is invalid, which will continue to cause problems for you. Try adding css padding to your LI elements to increase the click area:
<style>
li { padding:10px; }
</style>
As to your question:
<ul id="targetElement">
<li data-contentName="item1.html">item one</li>
<li data-contentName="item2.html">item two</li>
<li data-contentName="item3.html">item three</li>
<li data-contentName="item4.html">item four</li>
</ul>
<script type="text/javascript">
$('#targetElement li').click(function(){ //for all li elements in #targetElement, do this on click
//remove the active class from the other li's
$('#targetElement li').removeClass('current');
//jQuery wrap the current li
var $this = $(this);
//add the class to the current li (the one that was clicked)
$this.addClass('current');
//get the name of the file to load
var fileToLoad = $this.data('contentName');
//then go about loading the file...
});
</script>
$("div li").on('click',function(){
$(this).siblings().removeClass("current");
$(this).load($(this).text() + ".html").closest("div").addClass("current");
});
Your question isn't clear, and your html isn't valid. so let me venture a guess at what your trying to do.
<ul class="pages"><li>item</li><li>item2</li><li>item3</li></ul>
$(function(){
$('ul.pages li').click(function(){
// load html - not user what you mean, so how ever your doing your page load.
$(this).addClass('someclass');
});
});
Is this what you where looking for?

Categories