How to apply classes based on the open linked? - javascript

My sidebar menu has the ability to expand and reveal the subsections of a section as shown below. The open section has the open active class and the clicked link has the active class.
All of my links has a different #url.So this will determine the classes.
How can I automatically place the open active and active classes based on the opened link? I can also use PHP.
<ul class="menu-items scroll-content">
<li class="open active">
<a href="javascript:;"><span class="title">first section</span>
<span class="open arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="active">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<span class="arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>

Try like this:
HTML:
<ul>
<li class="">
<a href="javascript:;"><span class="title">first section</span>
<ul class="sub-menu">
<li class="">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
JS:
var href = location.pathname+location.hash;
$('.sub-menu > li > a').each(function() {
if ($(this).attr("href") == href) {
$(this).parent('li').addClass('active');
$(this).parent().parent().parent('li').addClass('open active');
}
});

Related

I have a sidebar with toggle menu but it don't work

I have a sidebar in my cPanel, And this sidebar has a menu toggle.
for example ==>
When clicking on the 'Account setting' there are some links or options under it.
And this is my code
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-dock-top"></i>
<div data-i18n="Account Settings">Account Settings</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-account-settings-account.html" class="menu-link">
<div data-i18n="Account">Account</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-notifications.html" class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
</ul>
</li>
Note : I'm working in Angular 14

html menu and sub menu active

I assign an active class in my menu, but the active class is not removed from the mobile menu, it always remains active. And also, if the subcategory is selected, I want the category itself to have an active class. I tried, I couldn't. Thank you in advance to the friends who helped.
For example, if category1.php page is open, "category" has the deactivated class.
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(url.indexOf(anchor.href) > -1){
li.classList.add("active");
}
});
}
updateMenu(window.location.href);
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>
window.location.pathname is the property you need. Once you have it, you can find the filename (last part of the whole pathname) by using .substr and .lastIndexOf.
In this code snippet, the active item is the parent of JS, I used that as an example since the location.href for these SO snippets is https://stacksnippets.net/js, hence the pathname is /js, and finally, the filename is js.
Check the code and you'll see what I mean
HIH
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(anchor.href.indexOf(url) > -1) {
const parentLI = $(li).parents('.menu-item').get(0)
if(parentLI)
parentLI.classList.add("active");
else
li.classList.add("active");
}
});
}
const pathname = window.location.pathname, filename=pathname.substr(pathname.lastIndexOf('/') + 1);
updateMenu(filename);
li.active > a span{
font-weight: bold !important;
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS too</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>

Get inner text to the before lastchild element

I have the following example, where I'm trying to extract the inner text for "a" element , which is a child of "i" element located before the last child of the list.
Example:
<div class="lms-pagination" id="lms-pagination">
<ul>
<li class="disabled">
<span class="current prev">Previous page</span>
</li>
<li class="active">
<span class="current en-lang">1</span>
</li>
<li>
<a data-page="1" class="page-link en-lang">2</a>
</li>
<li>
<a data-page="2" class="page-link en-lang">3</a>
</li>
<li class="disabled"><span class="ellipse">...</span></li>
<li>
<a data-page="17" class="en-lang">18</a> <!-- Try to extract 18 in this example -->
</li>
<li>
Next page
</li>
</ul>
</div>
I'm trying to use something like
lastPage = await newPage.$$eval('#lms-pagination>ul>li:nth-child(???)>a', el => el.innerText);
Using Javascript:=
function myFunction() {
var list = document.getElementById("myList").lastChild.innerHTML;
document.getElementById("demo").innerHTML = list;
var items = document.querySelectorAll("li");
var lastchild = items[items.length - 2].innerHTML;
document.getElementById("demo1").innerHTML = lastchild;
}
<p>Example list:</p>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
<li>Coffee22</li>
<li>Tea22</li>
<li>Coffee33</li>
<li>Tea33</li>
</ul>
<p>Click the button to get the HTML content of the list's last child node.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<p id="demo1"></p>
<script>
</script>
Using jQuery:=
alert($("li:nth-last-of-type(2)").text())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lms-pagination" id="lms-pagination">
<ul>
<li class="disabled">
<span class="current prev">Previous page</span>
</li>
<li class="active">
<span class="current en-lang">1</span>
</li>
<li>
<a data-page="1" class="page-link en-lang">2</a>
</li>
<li>
<a data-page="2" class="page-link en-lang">3</a>
</li>
<li class="disabled"><span class="ellipse">...</span></li>
<li>
<a data-page="17" class="en-lang">18</a>
<!-- Try to extract 18 in this example -->
</li>
<li>
Next page
</li>
</ul>
</div>
You can get second last child value like this.
$("li").eq(-2).text()

jquery how to hide a single element from others if not exist

I am working on a sidebar with (single menu) and (submenus).
The menus that contains (submenu) has (+-) toggle, and the ones with singles has nothing.
How can I hide the (+-) of the single menus from other similar elements.
I have tried this way, it hides for all of them.
HTML
<div class="multitoggle">
<ul id="accordions">
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> CURRENT ACCOUNTS</div>
<ul class="submenu">
<li>MPOWER CLASSIC</li>
<li>MPOWER GOLD</li>
<li>MPOWER PLATINUM</li>
</ul>
</li>
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> OUR SEGMENTS</div>
</li>
</ul>
</div>
JS
$(window ).load(function(e) {
if ($('.nav-parents').has('submenu').length == 0) {
$('.nav-parents').find('.plus, .minus').css('display', 'none');
}
});
Actually only has() will not work in this case. You have to use the combination of not() and has(). And also you missed the dot before submenu. You can do it like following.
$(window ).load(function(e) {
$('.nav-parents').not(':has(.submenu)').find('.plus, .minus').css('display', 'none');
});
Your if statement doesn't do much here, because when you run this:
$('.nav-parents').find('.plus, .minus').css('display', 'none');
it will just select all .nav-parents again and hide their pluses and minuses.
To select only the nav-parents with no submenu, you should use this jQuery code:
$('.nav-parents').not(':has(.submenu)')
Here is your code working in a snippet:
$(window).load(function(e) {
$('.nav-parents')
.not(':has(.submenu)')
.find('.plus, .minus')
.hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multitoggle">
<ul id="accordions">
<li class="nav-parents">
<div class="link">
<span class="plus">+</span>
<span class="minus">-</span>
CURRENT ACCOUNTS
</div>
<ul class="submenu">
<li>
MPOWER CLASSIC
</li>
<li>
MPOWER GOLD
</li>
<li>
MPOWER PLATINUM
</li>
</ul>
</li>
<li class="nav-parents">
<div class="link">
<span class="plus">+</span>
<span class="minus">-</span>
OUR SEGMENTS
</div>
</li>
</ul>
</div>
You can do it in css itself as the div will be the last-child or only-child if it doesn't have a submenu. so you can achieve it by using
.nav-parents > div.link:last-child > span{
display:none;
}
.nav-parents > div.link:last-child > span{
display:none;
}
<div class="multitoggle">
<ul id="accordions">
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> CURRENT ACCOUNTS</div>
<ul class="submenu">
<li>MPOWER CLASSIC</li>
<li>MPOWER GOLD</li>
<li>MPOWER PLATINUM</li>
</ul>
</li>
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> OUR SEGMENTS</div>
</li>
</ul>
</div>
Jquery way:-
If you still want to do it on jquery you can remove easily by
$(window ).load(function(e) {
$('.nav-parents > div.link:only-child > span').css('display', 'none');
});
$(window ).load(function(e) {
$('.nav-parents > div.link:last-child > span').css('display', 'none');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multitoggle">
<ul id="accordions">
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> CURRENT ACCOUNTS</div>
<ul class="submenu">
<li>MPOWER CLASSIC</li>
<li>MPOWER GOLD</li>
<li>MPOWER PLATINUM</li>
</ul>
</li>
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> OUR SEGMENTS</div>
</li>
</ul>
</div>

prev next function for nested tabs in bootstrap

I am using bootstrap tabs and dropdown with prev next functionality
<div class="row">
<input class="btnPrevious underline" type="button" value="« Previous" />
<input class="btnNext underline" type="button" value="Next »" />
</div>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<!--<li class="active">Before Starting the Application</li>-->
<li class="active dropdown tabdrop"> Before Starting the Application<b class="caret"></b>
<ul class="dropdown-menu dm">
<li class="active">Before Starting the Application
</li>
<li>Who Can Apply?
</li>
</ul>
</li>
<li class="dropdown tabdrop"> <a href="#" role="tab" data-toggle="dropdown" class="dropdown-toggle">
Application Details
<span class="caret"></span>
</a>
<ul class="dropdown-menu dm">
<li>Applicant Details
</li>
<li>Premises Details
</li>
<li>Details of Personal License Holder
</li>
</ul>
</li>
<li>Fees and Payments
</li>
<li>Checklist
</li>
<li>Conditions
</li>
<li>Submit
</li>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
<li>Tab 4
</li>
<li>Tab 5
</li>
<li>Tab 6
</li>
<li>Tab 7
</li>
</ul>
</div>
To find anchor tag...for prev next
$('.btnNext').click(function () {
$('.nav-tabs > .active').next('li, li > ul > li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
But from the script i didn't find all the anchor tag means anchor tag inside the dropdown (li > ul > li > a )
<li class="dropdown tabdrop"> <a href="#" role="tab" data-toggle="dropdown" class="dropdown-toggle">
Application Details
<span class="caret"></span>
</a>
<ul class="dropdown-menu dm">
<li>Applicant Details
</li>
<li>Premises Details
</li>
<li>Details of Personal License Holder
</li>
</ul>
</li>
I want to find each anchor tag from nav-tabs for prev and next function. Thanks in Advance.
CHK1LAST();
var $tabs = $('.tabbable li');
$('.btnPrevious').on('click', function () {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
CHK1LAST();
});
$('.btnNext').on('click', function () {
if ($tabs.filter('.active').find('ul').length > 0) {
var $bb = $tabs.filter('.active').find('ul');
if ($bb.find('li.active').length > 0) {
if ($bb.find('li.active').index() == (parseInt($bb.find('li').length) - 1)) {
if ($bb.parent('li').next('li').find('li').length > 0)
$bb.parent('li').next('li').find('li').eq(0).find('a[data-toggle="tab"]').tab('show');
else
$bb.parent('li').next('li').find('a[data-toggle="tab"]').tab('show');
}
else
$bb.find('li.active').next('li').find('a[data-toggle="tab"]').tab('show');
}
else
$bb.find('li').eq(0).find('a[data-toggle="tab"]').tab('show');
}
else
$tabs.filter('.active').next('li').eq(0).find('a[data-toggle="tab"]').tab('show');
CHK1LAST();
});

Categories