Unable to put active in particular ul li - javascript

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');

Related

I want to make a parent nav link sidebar active when its child is active (current page)

Here's my code:
I want it in a way that when i click on a child link, it becomes active and the parent link is active too. I utilize the css class .active for my active classes for both the main and sub-menu.
The below JS snippet works but only for the menus without sub-menus
$(document).ready(function($) {
var url = window.location.href;
var activePage = url;
$('.menu li a').each(function() {
var linkPage = this.href;
if (activePage == linkPage) {
$(this).closest("li").addClass("active");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="">
<a href="index.php">
<i class="material-icons">home</i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="sell.php">
<i class="material-icons">receipt</i>
<span>Sell</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">show_chart</i>
<span>Reporting</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">apps</i>
<span>Products</span>
</a>
<ul class="ml-menu">
<li>
Add Product
</li>
<li>
All Products
</li>
<li>
Add Category
</li>
<li>
All Categories
</li>
</ul>
</li>
</ul>
</div>
<!-- #Menu -->
Implement an on mousedown event listener for your anchor tags, passing in the id for each anchor tag and use the parentElement property to get the element's parent.
document.getElementById("myLI").parentElement.nodeName;
you can try this JS code:
$(document).ready(function () {
$('a').click(function () {
//removing the previous selected menu state
$('.menu').find('li.active').removeClass('active');
//adding the state for this parent menu
$(this).parents("li").addClass('active');
});
});
And the css for Active link:
.active > a {
color:red;
}
hope it helps...

Adding HTML children and parent tabs to active class using 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.

I want to add some classes to my nav

i use .selected for topnav and .active for sub navs
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav uppercase col-md-10">
<li class="dropdown dropdown-fw open selected">
<i class="icon-home"></i> Dashboard
<ul class="dropdown-menu dropdown-menu-fw">
<li class="active">Dashboard</li>
</ul>
</li>
<li class="dropdown dropdown-fw">
<i class="icon-puzzle"></i>example
<ul class="dropdown-menu dropdown-menu-fw">
<li class="disabled">example1</li>
<li>example2</li>
<li class="disabled">Sexample3</li>
<li>example4</li>
</ul>
</li>
</ul>
what i want is when i click and redirect to an other page i want javascript to detect the url of the page and active the links inside my navbar that contains the same href value as the url + add selected class to the parent of .dropdown-menu-fw
var url = window.location;
console.log(url);
$('.dropdown-menu-fw li a[href="'+ url +'"]').parent().addClass('active');
$('.dropdown-menu-fw li a').filter(function() {
return this.href == url;
}).parent().addClass('active');
Maybe you meant
var url = window.location.href; instead of .location?
That way the whole URL is retrieved.
.location retrieves an object.
This is working for me
$(document).ready(function(){
var url = window.location.href;
$('.dropdown-menu-fw li').removeClass('active');
$('.dropdown-menu-fw li a').filter(function() {
return this.href == url;
}).parent().addClass('active');
$('.dropdown-fw').removeClass('selected open');
$('.dropdown-menu-fw li a[href="'+ url+'"]').closest(".dropdown-fw").addClass('open selected');
// $('.dropdown-menu-fw li a').parentsUntil(".dropdown-fw").addClass('open');
});

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

How do I slide/open specific menu item using javascript / jquery on page load?

I'm new to java and jquery scripting, I've managed to learn how to open menu on item mouse click, but how do I open specific menu on page load?
I'm using this:
<!-- menu -->
<div id="menuone">
<ul id="menu">
<li>
Home
</li>
<li>
<a>About</a>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>
<a>Projects</a>
<ul>
<li>project1</li>
<li>project2</li>
<li>project3</li>
</ul>
</li>
</ul>
</div>
<!-- menu end -->
and my javascript on click is this:
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
but my quest is: how do I open specific item(s) on page load? How do I open menu item 2 for example ("about"), or menu utem 3 ("projects"), etc...?
quite easy actually;
$('#menu li a:eq(1)').trigger('click'); //open "about"
$('#menu li a:eq(2)').trigger('click'); //open "projects"
hope I helped
Put an id to your a tags like
<div id="menuone">
<ul id="menu">
<li>
Home
</li>
<li>
<a id="about">About</a>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>
<a id="projects">Projects</a>
<ul>
<li>project1</li>
<li>project2</li>
<li>project3</li>
</ul>
</li>
</ul>
</div>
and then pass an id of your choice to your function like
// Pay attention to pass id to function
function initMenu(id)
{
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
});
// Add following lines
if (typeof(id) != 'undefined')
{
$('#'+id).click();
}
}
$(document).ready(function() {initMenu('projects');});
Then to change you can use instead
$(document).ready(function() {initMenu('about');});

Categories