JQuery add active class - javascript

Iam trying to add active class in the <li> but it's not working.
This is all my codes in the view:
<script type="text/javascript">
$(document).ready(function () {
$('#nav li.menu').click(function () {
$('#nav li.menu').removeClass("active");
$(this).addClass("active");
});
});
</script>
<nav id="nav">
<ul class="nav nav-pills nav-stacked">
<li class="main_menu"><span class="fa fa-bars fa-lg icon_here"></span> <span class="main">MENU</span></li>
#foreach (var item in Model) {
<li class="menu"> <i class="fa fa-dot-circle-o fa-lg"></i> #item.sm_name</li>
}
</ul>
</nav>
This is what displayed in the console:

Related

How to apply toggle for child elements

When I clicked the button, the whole side bar is toggling, but I need only the side menus to get toggle.
HTML part
<nav id="sidebar">
<div class="sidebar-header">
<img src="/fintantra/images/logo.jpg" style="margin-left:4px;">
<div class="btn-group">
.....
......
<ul class="list-unstyled components" id="demo">
<li>
<a href="#adminSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-user"></i>
FDR
</a>
<ul class="collapse list-unstyled" id="adminSubmenu">
<li>
<i class="fa fa-arrows-alt" aria-hidden="true"></i> FPO Profile
</li>
....
</ul>
</li>
<li>
<a href="#fisSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-user"></i>
FIS
</a>
<ul class="collapse list-unstyled" id="fisSubmenu">
<li>
<i class="fa fa-arrows-alt" aria-hidden="true"></i> FPO Profile
</li>
....
</ul>
</li>
...
</ul>
</nav>
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>KANCHI</span>
</button>
JS Part
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
The above code is working for the whole sidebar and when I replace ('#sidebar') with ('#demo') it is not toggling. I'm using demo as id in the menu ul section.
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#demo').toggleClass('active');
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#demo').toggle();
});
});
</script>

Select Closest href Match With jQuery?

trying to narrow down <a> hrefs to one with jQuery filter and then add the tag active class. I am doing this because I get redirected from sidebar submenu and want to still keep sidebar menu open.
$(document).ready(function () {
var url = window.location;
$('ul.treeview-menu a').filter(function () {
return url.indexOf(this.href) > -1;
}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">General</li>
<li class="home"><i class="fas fa-tachometer-alt"></i> <span> Dashboard</span></li>
<li class="header">Data Managment</li>
<li class="treeview">
<a href="#">p <span>Tree</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li>foo</li>
<li>bar</li>
<li>blah</li>
<li>blahh</li>
</ul>
</li>
<li class="treeview">
<a href="#"></i> <span>Tree 2</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li>aaa</li>
...
</ul>
</li>
</ul>
then if I get redirected inside foo and href be like /p/pages/foo.php/new.php I still want to foo be active.
why don't this work?
Other way would be using each loop and then comparing if the url == this.href if yes then add class to that li and open closest ul.
Demo Code :
$(document).ready(function() {
//just for demo...
var url = 'https://stacksnippets.net/p/pages/bar.php';
$('ul.treeview-menu a').each(function() {
//if full url is not same with li use indexof else if http://...also there in href of a tag use below..
if (url == this.href) {
$(this).addClass('active') //add class active to `a`
$(this).closest("ul").slideDown(); //slide ul tag where `li` is active
}
})
})
.treeview-menu {
display: none
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">General</li>
<li class="home"><i class="fas fa-tachometer-alt"></i> <span> Dashboard</span></li>
<li class="header">Data Managment</li>
<li class="treeview">
<a href="#">p <span>Tree</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li>foo</li>
<li>bar</li>
<li>blah</li>
<li>blahh</li>
</ul>
</li>
<li class="treeview">
<a href="#"> <span>Tree 2</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li>aaa</li>
...
</ul>
</li>
</ul>
Updated Code :
$(window).on('load', function() {
var url = window.location.href;
var new_url = url.slice(url.lastIndexOf('/') + 1);
$('ul.treeview-menu a').each(function() {
var res = this.href.replace(".php", "");
var href = res + "/" + new_url;
if (href == url) {
$(this).parent().addClass('active') //add class active to `a
$(this).closest("ul").slideDown(); //slide ul tag where `li` is active
}
})
});

Active SideBar Jquery

My jquery code does not perform active sidebar action. where did I mistake, can anyone tell us?
Where should I have to change..? should I have make somechange in html code..?
This is my jquery code
$(function() {
$(".sidebar-menu li").removeClass("active");
$("#liaccounts").addClass("active");
$("#selectAll").click(function() {
// $(".checkAll").prop('checked', $(this).prop('checked'));
var checked = ($(".checkAll").prop('checked') == false) ? true : false;
$(".checkAll").prop('checked', checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar-menu">
<!-- Sidebar user panel (optional) -->
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!--
Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library
-->
<li class="nav-item">
<a href="{{url('dashboard')}}" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('contact')}}" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Contact</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('accounts')}}" class="nav-link">
<i class="nav-icon fas fa-user"></i>
<p>Accounts</p>
</a>
</li>
</ul>
</nav>
</div>

onclick jquery add/remove class function not working

I'm using single navigation file for all web pages, so i need to add or remove class based on click function. but somehow it's not working fine. any help would be appreciated.
$(function() {
$("li").on("click", function() {
$("li.active").removeClass("active");
$(this).addClass("active");
});
});
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li style="cursor: pointer;" onclick="window.location='new-patient.php';">
<a><i class="fa fa-plus-square"></i>New Patient</a>
</li>
<li style="cursor: pointer;" onclick="window.location='returning-patient.php';">
<a><i class="fa fa-plus-square"></i>Returning Patient</a>
</li>
</ul>
</div>
</div>
$('#menu li a').on('click', function(){
$('#menu li a.current').removeClass('current');
$(this).addClass('current');
});
JSFiddle
You can use following script on every page to set this.
var pageName = (function () {
var a = window.location.href,
b = a.lastIndexOf("/");
return a.substr(b + 1);
} ());
$("#menu-content a").each(function () {
if ($(this).attr('href') == pageName) {
$(this).parents("li").addClass('active');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="new-patient.php">
<i class="fa fa-plus-square"></i>New Patient
</a>
</li>
<li>
<a href="returning-patient.php">
<i class="fa fa-plus-square"></i>Returning Patient
</a>
</li>
</ul>
</div>
</div>

Tooltip onclick to hide

How do I hide the tooltip after I click the dropdown menu? Here is the script
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
placement : 'bottom'
});
});
</script>
This is the html
<ul class="nav navbar-nav">
<li class="dropdown" data-toggle="tooltip" data-placement="bottom" data-original-title="Main Link">
<i class="fa fa-briefcase"></i>
<ul class="dropdown-menu" role="menu">
<li>link</li>
<li>link</li>
</ul>
</li>
</ul>
I haven't tested this but you can try using this, Change this:
<li class="dropdown" data-toggle="tooltip" data-placement="bottom" data-original-title="Main Link">
with:
<li id="tooltip" class="dropdown" data-toggle="tooltip" data-placement="bottom" title="Main Link">
and JS:
$(".dropdown-menu li").click(function() {
$('#tooltip').tooltip('hide');
});

Categories