Adding HTML children and parent tabs to active class using javascript - javascript

I have this fly-out mene. This is the HTML:
<ul class="nav">
<li class="tab"><a class="active" href='#sw_operations'>Software Operations</a></li>
<li class="tab"><a href='#software'>Software</a></li>
<li class="tab"><a href='#fac_staff'>Fac/Staff Members</a></li>
<li class="tab"><a href='#vendor'>Vendors</a></li>
<li class="tab"><a href='#admin'>Admin</a>
<ul>
<li><a href='#users'><span>Users</span></a></li>
<li><a href='#variables'><span>Variables</span></a></li>
<li><a href='#Reports'><span>Reports</span></a></li>
</ul>
</li>
</ul>
And this is the JS:
$('.tab a').on('click', function (e) {
e.preventDefault();
$(".tab a").removeClass('active');
$(".tab a").parent().removeClass('active');
$(this).addClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
What I am struggling with is, when the user hits one of the 3 children tabs, I want it to add that specific child tab to active class as well as it's parent. I have a CSS part for the tab being active.
How do I add the parent tab in addition to the child tab to active class in JS?
Thanks :)

Something like that :
<li class="tab"><a id='admin' href='#admin'>Admin</a>
<ul>
<li><a href='#users' data-parent-id='admin'><span>Users</span></a></li>
<li><a href='#variables' data-parent-id='admin'><span>Variables</span></a></li>
<li><a href='#Reports' data-parent-id='admin'><span>Reports</span></a></li>
</ul>
$('.tab a').on('click', function (e) {
e.preventDefault(enter code here);
$(".tab a").removeClass('active');
$(this).addClass('active');
$(".tab #"+$(this).attr('data-parent-id')).addClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});

I would do it like this but there are several ways how to do this...
Firstly you add a child class to all of your <li> elements. Then you add an id of 'Admin' for example to your admin <li>.
Now in jQuery you can check if the element on which you pressed is of class child or not. If it is true then you can add the class of active to your Admin <li>.
Code:
<li class="tab" id="Admin"><a href='#admin'>Admin</a>
<ul id="Children">
<li><a class="child" href='#users'><span>Users</span></a></li>
<li><a class="child" href='#variables'><span>Variables</span></a></li>
<li><a class="child" href='#Reports'><span>Reports</span></a></li>
</ul>
</li>
jQuery Code:
$('.tab a').on('click', function (e) {
if($(this).hasClass("child") == true) {
$("#Admin").addClass('active');
}
});
You just have to append the if statement to your code, I didn't include your code.

Related

Expand parent menu if child menu is selected

I have a menu with sub child menus. The problem I am facing is that whenever I select a child menu after page loads, the menu collapses. I want to open the parent menu expanded.
The HTML Code is:
<div id='cssmenu'>
<ul>
<li><a href='http://internallink.com/home'><span>Home</span></a></li>
<li class='active has-sub'><a href='http://internallink.com/products'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='http://internallink.com/product1'><span>Product 1</span></a>
<ul>
<li><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
<li class='last'><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='http://internallink.com/product2'><span>Product 2</span></a>
<ul>
<li><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
<li class='last'><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://internallink.com/about'><span>About</span></a></li>
<li class='last'><a href='http://internallink.com/contact'><span>Contact</span></a></li>
</ul>
</div>
The JS is:
jQuery(document).ready(function () {
jQuery('#cssmenu').on("click","li.has-sub .holder",function () {
var element = jQuery(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
jQuery('#cssmenu ul li.has-sub').prepend('<span class="holder"></span>');
});
How can i expand the parent menu if child menu is selected.
Fiddle: https://jsfiddle.net/x415mjfq/
You have the full, absolute URL's in the links; that can be used to your advantage. Simply use document.querySelector with the square bracket selector, and the location.href property:
document.querySelector("a[href='" + location.href + "']").classList.add("selected");
Then, do whatever you need to do to it. In this example, I'm adding the selected class.
Fiddle

Unable to put active in particular ul li

I am having the ul li structure as:
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="active treeview">
<a href="#">
<span>Dashboard</span>
</a>
<ul class="treeview-menu">
<li class="active">Dashboard v1</li>
<li>Dashboard v2</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<span>Layout Options</span>
<span class="label label-primary pull-right">4</span>
</a>
<ul class="treeview-menu">
<li>Top Navigation</li>
<li>Boxed</li>
<li>Fixed</li>
<li> Collapsed Sidebar</li>
</ul>
</li>
</ul>
What i tried is
$(".sidebar-menu ul li a").on("click", function() {
$(".active treeview")
.not($(this).parents('li'))
.removeClass('active treeview');
$(this)
.parent()
.addClass('active treeview')
.find("ul.treeview")
.stop("true", "true")
.slideDown()
.addClass('active');
$(this)
.parent()
.siblings()
.find("ul.treeview")
.stop("true", "true")
.slideUp()
.removeClass('active');
});
Here the class 'active treeview' shows the Main menu as active and class active shows sub menu active.
i tried using javascript to remove all other classes, the classes get removed but when adding class to the particular li it do not works. how to write the java script when i click on some menu it shows that sub menu and his parent is activated.
try this one
works for both side menu and treeview
/** add active class and stay opened when selected */
var url = window.location;
// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
return this.href == url;
}).parent().siblings().removeClass('active').end().addClass('active');
// for treeview
$('ul.treeview-menu a').filter(function() {
return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").siblings().removeClass('active').end().addClass('active');

How to change active menu and submenu item style

I'm trying to change the colour of active menu/submenu which is selected by user.
For example when Sub11 is clicked, Link 1 and Sub11 will both turn red. Likewise when Sub22 is clicked, Link 2 and Sub22 will be red.
ul a { cursor: pointer; }
.active { color:red;}
<ul>
<li class="active"><a>Link 1</a>
<ul>
<li><a>Sub11</a></li>
<li><a>Sub12</a></li>
</ul>
</li>
<li><a>Link 2</a>
<ul>
<li><a>Sub21</a></li>
<li><a>Sub22</a></li>
</ul>
</li>
<li><a>Link 3</a></li>
</ul>
try using jquery this code:
$('.link > a').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
$('.submenu > li').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
$(this).parent('ul').prev('a').addClass('active');
});
Explanation:
The first part: whenever you click on .link item you remove every other active item and set the clicked one to active.
The second part: whenever you click on a submenu item you remove active state from the previous item and set it to the clicked submenu item and its predecessor .link item
You gonna have to add classes link and submenu to your html like this:
<ul>
<li class="link">
<a class="active">Link 1</a>
<ul class="submenu">
<li><a>Sub11</a></li>
<li><a>Sub12</a></li>
</ul>
</li>
<li class="link">
<a>Link 2</a>
<ul class="submenu">
<li><a>Sub21</a></li>
<li><a>Sub22</a></li>
</ul>
</li>
<li class="link"><a>Link 3</a></li>
</ul>
Here is a fiddle

adding class active to submenu after reloading page

After clicking the li item, i added the active class with js but it leads to the other page and the active class disappears.
I am using bootstap navwalker so don't know how to use php code into it.
<div id="cssmenu" class="right-tabs">
<ul>
<li></li>
<li>
<ul role="menu" class=" dropdown-menu">
<li>link</li>
</ul>
</li>
<li>page</li>
</ul>
</div>
JS
$(document).ready(function(){
$(".dropdown-menu > li").click(function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
});
Could you just add the class based on the url?
Example assuming your on a about page
$(function() {
var loc = window.location.href; // returns the full URL
if(/about/.test(loc)) {
$('.dropdown-menu > li .about').addClass('active');
}
});
in link.php, add active class
<div id="cssmenu" class="right-tabs">
<ul>
<li></li>
<li class="activeClass">
<ul role="menu" class=" dropdown-menu">
<li>link</li>
</ul>
</li>
<li>page</li>
</ul>

Multiple hidden menus that open and close using jQuery?

please see this fiddle http://jsfiddle.net/rabelais/tw6sdod9/
$(document).ready(function() {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function() {
$('ul#inner-li ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
$('#nav li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
$(document).ready(function() {
$('li ul#inner-li-texts').slideDown(0);
$('.no-js li a#texts').on("click", function() {
$('ul ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="no-js">
<li class="caps">Works
<ul id="inner-li">
<li>blog
</li>
<li>Portraits
</li>
<li>Paintings
</li>
<li>Drawings
</li>
<li>Photography
</li>
</ul>
</li>
<li class="caps"><a id="texts" href="#">Texts</a>
<ul id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a>
</li>
<li>Essay two
</li>
<li>Essay three
</li>
</ul>
</li>
<li class="caps">News
</li>
<li class="caps">Biography
</li>
</ul>
On this fiddle there is a menu with two sub-menus hidden under the 'Works' and 'Text' links.
What I am trying to achieve is this:
On load I want the text sub menu open and the works menu closed.
When the users clicks on either link the sub menu to that link opens or closes.
$(document).ready(function () {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function () {
$('ul#inner-li ul').slideUp(400);
if($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
Updated the Jsfiddle
HTML
<ul class="no-js">
<li class="caps"><a class="alink" href="#">Works</a>
<ul class="cls" id="inner-li">
<li>blog</li>
<li>Portraits</li>
<li>Paintings</li>
<li>Drawings</li>
<li>Photography</li>
</ul></li>
<li class="caps"><a id="texts" class="alink" href="#">Texts</a>
<ul class="cls" id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a></li>
<li>Essay two</li>
<li>Essay three</li>
</ul>
</li>
<li class="caps"><a class="alink" href="../news.htm">News</a></li>
<li class="caps"><a class="alink" href="../biography.htm">Biography</a></li>
</ul>
Script
$(document).ready(function () {
$('ul.cls').slideUp(0);
$('a.alink').on("click", function () {
$(this).next("ul.cls").slideToggle(400);
});
});
Worked for me
Hope this helps.
Why were you adding a second click handler to #texts? There's one click handler here:
$('.no-js li a').on("click", function () {
//...
});
But then there's another one here:
$('.no-js li a#texts').on("click", function () {
//...
});
So while clicking on any other menu invokes only the first handler, clicking on #texts invokes both. It looks like you only want the first.
You add two times a click-listener for your menu.
I updated the FIDDLE
Just removed the duplicated code and added:
jQuery('#texts').click();

Categories