I need to highlight the clicked navbar with active class - javascript

This is my Navbar code:
<div class="navbar-collapse offcanvas-collapse justify-content-md-center" id="navbarsExampleDefault">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#Url.Action(" DashBoard ","Admin ")">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" SectionsList ","Admin ")">Sections</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" DifficultyList ","Admin ")">Difficulty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" QuestionsList ","Admin ")">Questions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" AssessmentList ","Admin ")">Assessments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" UsersList ","Admin ")">User's</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Students</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="nav-link" href="#Url.Action(" StudentResult ","Admin ")">Student Results</a>
</div>
</li>
</ul>
</div>
This is my click function:
$("#navbarsExampleDefault li a").click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
I need to highlight the selected navbar with active class. I have tried this one but not working
public ActionResult SectionsList()
{
return view();
}
This is one of my action method

Place the below edited piece of code which is tested
$(document).ready(function(){
$(".navbar-nav .nav-link").click(function (e) {
e.preventDefault();
$('.nav-item').removeClass('active');
$(this).closest('.nav-item').addClass('active');
});
});

var change = function () {
var url = window.location.pathname;
$('ul.navbar-nav a[href="' + url + '"]').parent().addClass('active');
};
change();
Load this function in the js file which is common to every page and remove class active from li.
Works even when the page reloads.
I hope it works for you! Thanks!

Please use below code
$("#navbarsExampleDefault li a").click(function () {
$('.nav-item').removeClass('active');
$(this).parent().addClass('active');
});
Hope it works for you Thanks!

Related

How can I go to href on tag with hide attribute value?

How can I go to href on tag with hide attribute value?
here is my navigation bar
$(function() {
$('#p10').hide();
$('#p11').hide();
$('#p12').hide();
$('#p13').hide();
$('#p14').hide();
$('#p15').hide();
$('#p16').hide();
$('#p17').hide();
$('#p18').hide();
$('#p19').hide();
$('#p20').hide();
$('#p21').hide();
$('#hideshow').click(function() {
$('#p10').toggle();
$('#p11').toggle();
$('#p12').toggle();
$('#p13').toggle();
$('#p14').toggle();
$('#p15').toggle();
$('#p16').toggle();
$('#p17').toggle();
$('#p18').toggle();
$('#p19').toggle();
$('#p20').toggle();
$('#p21').toggle();
});
$('#navbarNav').click(function() {
console.log($(this));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link " href="#section2">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#p1">Subway congestion prediction app</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#p2">Image classification</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#p3">Community site</a>
</li>
...
<li class="nav-item">
<a class="nav-link" href="#p17">Assembly</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#p18">Data structure</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#p19">Concave</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#p20">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section5">Contact</a>
</li>
</ul>
</div>
When loading the page here, p10 to p21 are hidden.
In this situation, if you click from 10 to 21 of the navigation bar, it is hidden and you cannot move to href.
How can I remove the hide attribute when clicking p10 to p21 of the navigation bar (click the #hideshow button at the time of the hide attribute) and move to p10 to p21?
<button type="button" class="btn btn-dark btn-lg " style="font-size:3rem; margin-bottom:100px; background-color:#3e454e" id="hideshow">Want to see more?</button>
#showhide button is between #p9 #p10
The jquery-selector is used in this way:
$('#<id>').hide();
-> the <id> (after the #) must be the id of the element. In your HTML it is the given href.
In your given code the #hideshow button is missing.
You try to select with jQuery IDs (10 - 21) but the HTML doesn't contain these IDs. Furthermore: The click event listener is assigned to the button #hideshow which doesn't exist.
If you define the IDs and add the button #hideshow it works:
$(function() {
$('#p10').hide();
$('#p11').hide();
$('#p12').hide();
$('#p13').hide();
$('#p14').hide();
$('#p15').hide();
$('#p16').hide();
$('#p17').hide();
$('#p18').hide();
$('#p19').hide();
$('#p20').hide();
$('#p21').hide();
$('#hideshow').click(function() {
$('#p10').toggle();
$('#p11').toggle();
$('#p12').toggle();
$('#p13').toggle();
$('#p14').toggle();
$('#p15').toggle();
$('#p16').toggle();
$('#p17').toggle();
$('#p18').toggle();
$('#p19').toggle();
$('#p20').toggle();
$('#p21').toggle();
});
$('#navbarNav').click(function() {
console.log($(this));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link " href="#section2">Home</a>
</li>
<li id="1p17" class="nav-item">
<a class="nav-link" href="#p1">Subway congestion prediction app</a>
</li>
<li id="p2" class="nav-item">
<a class="nav-link" href="#p2">Image classification</a>
</li>
<li id="p3" class="nav-item">
<a class="nav-link" href="#p3">Community site</a>
</li>
...
<button type="button" id="hideshow">Want to see more?</button>
...
<li id="p17" class="nav-item">
<a class="nav-link" href="#p17">Assembly</a>
</li>
<li id="p18" class="nav-item">
<a class="nav-link" href="#p18">Data structure</a>
</li>
<li id="p19" class="nav-item">
<a class="nav-link" href="#p19">Concave</a>
</li>
<li id="p20" class="nav-item">
<a class="nav-link" href="#p20">Contract</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section5">Contact</a>
</li>
</ul>
</div>

shift inner tags to parent tags

I've website https://www.totallifts.com.au/ whose menus are showing. There is + which is hiding extra menus.
I am trying to place hidden menu under new line such that it looks like this:
The code is this:
<ul id="top_menu" class="nav navbar-nav ml-auto text-right">
<li class="nav-item mm-mega-menu">....<li>
<li class="nav-item mm-mega-menu">....</li>
<li class="nav-item mm-mega-menu">....<li>
<li class="nav-item mm-mega-menu">....</li>
<li class="nav-item mm-mega-menu">....<li>
<li class="nav-item mm-mega-menu">....</li>
<li class="nav-item mm-mega-menu">....<li>
<li class="nav-item dropdown o_extra_menu_items">
<a role="button" href="#" class="nav-link dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-plus"></i></a>
<ul class="dropdown-menu">
<li class="mm-mega-menu">Vacuum & Pneumatics<li>
<li class="mm-mega-menu">Industrial Towing<li>
</ul>
</li>
</ul>
My attempt:
$(".dropdown-menu").appendTo("#top_menu");
But it hides the entire menus under +
and by doing this:
$("#top_menu").appendTo(".dropdown-menu"); does not show entire menu.
This one is closer to my requirement but i dont get why i m not getting the result.
How to move an element into another element?
Sorry for bad English.
You need to append all li tag so try this one: $(".dropdown-menu li").appendTo("#top_menu");
function append() {
$(".dropdown-menu li").appendTo("#top_menu");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button onclick="append()">click to append</button>
<ul id="top_menu" class="nav navbar-nav ml-auto text-right">
<li class="nav-item mm-mega-menu">....</li>
<li class="nav-item mm-mega-menu">....</li>
<li class="nav-item mm-mega-menu">....</li>
<li class="nav-item mm-mega-menu">....</li>
<li class="nav-item mm-mega-menu">....</li>
<li class="nav-item mm-mega-menu">....</li>
<li class="nav-item mm-mega-menu">....</li>
<li class="nav-item dropdown o_extra_menu_items">
<a role="button" href="#" class="nav-link dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-plus"></i></a>
<ul class="dropdown-menu">
<li class="mm-mega-menu">Vacuum & Pneumatics</li>
<li class="mm-mega-menu">Industrial Towing</li>
</ul>
</li>
</ul>

how do i set navbar item to be active by default before the user clicks a nav link?

i have a site i'm working on and i have the nav-items set so that when you click on a nav-link it changes the active class to the link that you clicked.
with this said how do I set a certain link to be active by default in the navbar?
Code:
$(".nav-item a").on("click", function() {
$(".nav-item a").removeClass("active");
$(this).addClass("active");
});
.nav-item a.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
</div>
</nav>
I am still quite new to javascript so any help will be great (even if it doesnt work)
Edit: It appears i didnt add enough detail, i'm sorry.
I would like to have the Home nav-link stay active until the user clicks another nav-link to another part of the page (im thinking about on scroll over different parts of the site but thats a different question altogether). with this in mind i want to have the site functionality to stay the same but have the default active link changed when a different one is clicked.
Just add active class to nav-link
$(".nav-item a").on("click", function() {
$(".nav-item a").removeClass("active");
$(this).addClass("active");
});
.nav-item a.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
</div>
</nav>
your code is about CLICK action and you dont want it . you should use
$('.nav-item a').addClass("active");
in out of function click body:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
</div>
</nav>
CSS:
.nav-item a.active
{
color: red;
}
JAVASCIPT:
<script>
$('.nav-item a').addClass("active");
</script>

Storing active class in local storage when using bootstrap 4 tabs

I am having some trouble with the tab list below:
<ul class="nav nav-tabs" data-tabs="tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="{$PageUrl}" role="tab">View</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{$PageUrl}?action=edit" role="tab">Edit</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{$PageUrl}?action=diff" role="tab">History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{$PageUrl}?action=print" role="tab">Print</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{$PageUrl}?action=attr" role="tab">Attributes</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown2">
<a class="dropdown-item" data-toggle="tab" href="#fat2" role="tab">#fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo2" role="tab">#mdo</a>
</div>
</li>
</ul>
Everything displays fine but this differs from how a lot of people implement tabs. Most examples i see have 'tab-content' and that shows the content for each tab. In my case i am using tabs to link alternate pages all together. This is where my issue comes in, When clicking on 'Edit' tab it does indeed load the edit page but with the active class or the 'View' tab still active. I cannot get the active class to switch between the tabs. I think this is because the page is reloading therefore eliminating the active data and setting it to default. How can I get around this and have it show the correct active tab after the newly selected page loads? Thanks for any help!
Edit:
Previously I was trying to use this at the bottom of my body with no luck:
$(function(){
var current = location.pathname;
$('#nav li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
Here is a possible solution:
<ul class="nav nav-tabs" data-tabs="tabs" role="tablist">
<li class="nav-item">
<a class="default nav-link" href="{$PageUrl}" role="tab">View</a>
</li>
<li class="nav-item">
<a class="edit nav-link" href="{$PageUrl}?action=edit" role="tab">Edit</a>
</li>
<li class="nav-item">
<a class="diff nav-link" href="{$PageUrl}?action=diff" role="tab">History</a>
</li>
<li class="nav-item">
<a class="print nav-link" href="{$PageUrl}?action=print" role="tab">Print</a>
</li>
<li class="nav-item">
<a class="attr nav-link" href="{$PageUrl}?action=attr" role="tab">Attributes</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown2">
<a class="dropdown-item" data-toggle="tab" href="#fat2" role="tab">#fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo2" role="tab">#mdo</a>
</div>
</li>
</ul>
<script>
$(function() {
var action = (location.search.match(/(\^?|&)action=(.*?)($|&)/i) || [])[2]
if(action) {
$('a.nav-link.'+action).addClass('active')
} else {
$('a.nav-link.default').addClass('active')
}
})
</script>
Does not add active class to any of the tabs by default.
All tab links have their action as class, to make it easy
On load it thecks the query in the window's address, and sets the active class accordingly

Add and remove class to nav after page reload

I have a navigation which can have up to two sub menus. Means, I have to open the li above (add class "open" to class "arrow") two times if the current page is a href in a sub sub navigation.
However, I am struggling on how to do this, how to solve this problem. My idea was to solve it via jQuery. Is there a better solution?
This is my navigation:
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-light">
<li class="nav-item start">
<a href="my-domain.com/dashboard" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">Dashboard</span>
<span class="selected"></span>
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<i class="icon-people"></i>
<span class="title">Kontakte</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item">
<a href="my-domain.com/kontaktverwaltung" class="nav-link ">
<span class="title">Kontaktverwaltung</span>
<span class="selected"></span>
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">Kunden</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
Kundendetails
<span class="selected"></span>
</li>
<li class="nav-item">
Kundenverwaltung
<span class="selected"></span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Example:
The current page is this one: my-domain.com/kundenverwaltung. That means, I have to add the class "active open" to both li elements of the ul sub menus as well as the class "open" to the class "arrow" of the li elements.
This is how it should be:
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-light">
<li class="nav-item start">
<a href="my-domain.com/dashboard" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">Dashboard</span>
</a>
</li>
<li class="nav-item **active open**">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<i class="icon-people"></i>
<span class="title">Kontakte</span>
<span class="arrow **open**"></span>
</a>
<ul class="sub-menu">
<li class="nav-item">
<a href="my-domain.com/kontaktverwaltung" class="nav-link ">
<span class="title">Kontaktverwaltung</span>
</a>
</li>
<li class="nav-item **active open**">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">Kunden</span>
<span class="arrow **open**"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
Kundendetails
</li>
<li class="nav-item">
Kundenverwaltung
</li>
</ul>
</li>
</ul>
</li>
</ul>
I have marked the changes on the classes with ** before and after the class name. This is my jQuery so far:
<script>
$("a.nav-link").each(function(index){
if($(this).attr("href") == window.location.href) {
$(this).parent().addClass("active open");
if ($(this).parent().parent().is("ul")) {
$(this).parent().parent().parent().addClass("active open");
var li = $(this).parent().parent().parent();
$(li[0].nodeName + " .arrow").addClass("open");
}
}
});
</script>
However, I don't think this is the best solution.. is there any better way? Kind regards
If you change the structure of HTML, your code will not be work, so - don't use parent(), try to use closest() https://api.jquery.com/closest, by reason that the closest() is a more reliable method
Cache data. U can use
http://api.jquery.com/attribute-equals-selector:
var $a = jQuery('a[href*="' + window.location.href + '"]');
$a.addClass("active open");
For adding a class to active page you should try added this by backend side, different kind of templating - can do it. But your approach also can be use

Categories