I have a JQuery code that adds a nav-link dynamicly to a nav-item. The problem is this nav-link doesn't change to active when clicked. I tried to dynamicly give it the active class but it doesn't take it. it seems after the page reloads everything is rest and it's always the first nav-link that takes the active class.
It's of course wrapped inside $(document).read(). I also tried to wrap it inside $(window).load() but same problem.
$('#A').append('<li class="nav-item">' + '<a class="nav-link" href="{{dynamic_link}}?id=1" >Dynamicly Added</a>' + '</li>');
$(document).on('click', '.collapse li', function(e) {
$(this).addClass('active').siblings().removeClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse mt-5 h-100 justify-content-between" id="navbarsExampleDefault">
<ul class="navbar-nav accordion" id="SideBar">
<li class="nav-item">
<a class="nav-link" href="{{index}}">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{list}}">list</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href data-toggle="collapse" data-target="#A" aria-controls="collapseOne"> A </a>
</li>
<ul class="collapse" id="A" data-parent="#SideBar">
<li class="nav-item">
<a class="nav-link" href="{{B}}">B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{C}}">C</a>
</li>
</ul>
</div>
If you can spot the problem I'd appreciate your guidance.
Because elements that you are appending not exist when you define the the click handler better to use the delegate() method from jQuery.
$('#A').append(
'<li class="nav-item">'
+'<a class="nav-link" href="{{dynamic_link}}?id=1" >Dynamicly Added</a>'
+'</li>') ;
$('.collapse ').delegate('li','click',function(e) {
e.preventDefault();
$( this ).addClass( 'active' ).siblings().removeClass( 'active' );
});
.collapse li.active a{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse mt-5 h-100 justify-content-between" id="navbarsExampleDefault" >
<ul class="navbar-nav accordion" id="SideBar">
<li class="nav-item">
<a class="nav-link" href="{{index}}">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{list}}" >list</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href data-toggle="collapse" data-target="#A" aria-controls="collapseOne" > A </a>
</li>
<ul class="collapse" id="A" data-parent="#SideBar" >
<li class="nav-item">
<a class="nav-link" href="{{B}}" >B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{C}}" >C</a>
</li>
</ul>
Related
I have a sidebar implemented using bootstrap collapsible,
The menus are all in tagged my issue is when i clicked on this tagged,
the page refreshed thus re-animating the collapsible panel and it doesnt look good
I have already stored the stage of this collapsible items in a cookie to know the previous state before reloading but now its the reanimation of it collapsing is what is happening.
How to solve this?
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Create</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Featured List</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Automated List</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Option 4</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Option 5</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Option 6</a></li>
</ul>
</div>
</li>
Your question is not easy to understand, so please rephrase it if this is not the answer you were looking for.
Looking at your code though, you are duplicating IDs and both .nav-linkss have the same data-bs-target target. So that won't work.
Make each toggle target and collapse ID unique:
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Create</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Featured List</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Automated List</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic-2" aria-expanded="true" aria-controls="ui-basic-2">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic-2">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Option 4</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Option 5</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Option 6</a></li>
</ul>
</div>
</li>
I have created with navbar, I haven't done much web development.
<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li>
<li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li>
<li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li>
<li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li>
<li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li>
<li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li>
<li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li>
</ul>
</div>
</nav>
This navbar is linked to at the top of all other pages to reduce repetition of code. Can someone help me with code so when menu item clicked "active" class is added to li element. This then triggers css.
CSS:
.nav-link.active {
color: white;
}
Thank you
Here is the exact complete code for your requirement in pure JavaScript. Hope it will help
const links = document.querySelectorAll('.nav-link');
if (links.length) {
links.forEach((link) => {
link.addEventListener('click', (e) => {
links.forEach((link) => {
link.classList.remove('active');
});
e.preventDefault();
link.classList.add('active');
});
});
}
.nav-link.active {
color: white;
}
<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
<button
class="navbar-toggler ml-1"
type="button"
data-toggle="collapse"
data-target="#collapsingNavbar2"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="navbar-collapse collapse justify-content-between align-items-center w-100"
id="collapsingNavbar2"
>
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="index.html">
<strong style="text-transform: uppercase">home</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">
<strong style="text-transform: uppercase">about</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flights.html">
<strong>FLIGHTS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="hotels.html">
<strong>HOTELS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="holidays.html">
<strong>HOLIDAYS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="property.html">
<strong>PROPERTY</strong>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="car_hire.html">
<strong>CAR HIRE</strong>
</a>
</li>
</ul>
</div>
</nav>
Use classList and toggle
document.querySelectorAll(".nav-item").forEach((ele) =>
ele.addEventListener("click", function (event) {
event.preventDefault();
document
.querySelectorAll(".nav-item")
.forEach((ele) => ele.classList.remove("active"));
this.classList.add("active")
})
);
.active {
color: green;
}
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">home</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">about</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>FLIGHTS</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>HOTELS</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>HOLIDAYS</strong></a></li>
<li class="nav-item "><a class="nav-link" ><strong>PROPERTY</strong></a></li>
<li class="nav-item active"><a class="nav-link" ><strong>CAR HIRE</strong></a></li>
</ul>
All you have to do is loop through the links, check if the current clicked link is the same as the current page, then set the active class and aria-current to that item.
Add this code to your javascript
document.querySelectorAll(".nav-link").forEach((link) => {
if (link.href === window.location.href) {
link.classList.add("active");
link.setAttribute("aria-current", "page");
}
});
Add following code in your JS:
$(".nav-item").click(function() {
$(".nav-item").removeClass("active"); // This will remove active classes from all <li> tags
$(this).addClass("active"); // This will add active class in clicked <li>
});
I want to change active link color after click.
When I'm on START link I want have START writing in another color etc.
I have few links = "#" beacuse I haven't done it yet but my code works only in these cases, f.ex: when I click "O HODOWLI" then START is in another color as earlier, but "O HODOWLI" should be.
When I click "KOCIĘTA" then this writing is in another color as it should be. So when I have "#" it works but should in all cases.
js:
$(document).ready(function () {
$("ul.navbar-nav > li").click(function (e) {
$("ul.navbar-nav > li").removeClass("active");
$(this).addClass("active");}) });
html:
<nav class="navbar navbar-expand-xl navbar-light ">
<button class="navbar-toggler small-screen-navbar" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/start"> START </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/o_hodowli"> O HODOWLI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> KOCIĘTA </a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> NASZE KOTY </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/opieka"> OPIEKA NAD KOTAMI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPINIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt"> KONTAKT </a>
</li>
</ul>
<ul class="navbar-nav sm-icons">
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/11891824050249/">
<i class="fab fa-facebook-square icon"></i></a>
</li>
</ul>
</div>
Maybe you can try with plain js:
const links = document.querySelectorAll('.nav-link')
links.forEach(link => {
link.addEventListener('click', (e) => {
links.forEach(link => link.classList.remove('active'))
e.target.classList.add('active')
})
})
.active {
color: red;
}
<nav class="navbar navbar-expand-xl navbar-light ">
<button class="navbar-toggler small-screen-navbar" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link active" href="/start"> START </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/o_hodowli"> O HODOWLI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> KOCIĘTA </a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> NASZE KOTY </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/opieka"> OPIEKA NAD KOTAMI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPINIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt"> KONTAKT </a>
</li>
</ul>
<ul class="navbar-nav sm-icons">
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/11891824050249/">
<i class="fab fa-facebook-square icon"></i></a>
</li>
</ul>
</div>
I have a sidebar with few <li> elements in it. as shown below
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="/">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./overview.html">
<i class="material-icons">explore</i>
<p>Overview</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>User Profile</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./typography.html">
<i class="material-icons">library_books</i>
<p>Typography</p>
</a>
</li>
[
When I click on other tabs such as Overview , User Profile , i want that purple highlight to be active on that class.
How do i achieve that using jquery?
<script>
$(document).ready(function() {
$('.sidebar-wrapper a').click(function(e){
.....
});
});
</script>
Since the navigation is not client side. You should listen to document ready event; when the page loads find the link with current location and highlight it.
$(document).ready(function() {
var link = $('.nav').find('a[href=".' + window.location.pathname + '"]');
link.parent().addClass('active');
});
Also make sure you remove active class from other links :)
Try following. Firstly, remove the active class from all the li's and then apply active class to the li which is the parent of the clicked a.
Please note, just added e.preventDefault() for example here and may not be required in actual code.
$(document).ready(function() {
$('.sidebar-wrapper a').click(function(e) {
$('.sidebar-wrapper li').removeClass("active");
$(e.currentTarget).parent().addClass("active");
e.preventDefault();
});
});
.active > a {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="/">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./overview.html">
<i class="material-icons">explore</i>
<p>Overview</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>User Profile</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./typography.html">
<i class="material-icons">library_books</i>
<p>Typography</p>
</a>
</li>
</ul>
</div>
Problem:
How can I make my navigation not appear on my #home section. However, when the user scrolls down or clicks on the find more button. When the user gets to the 'features-icons' section how can I make my navigation bar appear for all sections including that and below? https://github.com/ldocherty1/Unit28_Assignment1
What I have tried:
HTML
<nav class="navbar scrolled-nav fixed-top navbar-expand-sm bg-light">
<a class="navbar-brand" href="#">Front End Web Developer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">☰</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#features-icons">Expectations</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">Design</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
CSS
.navbar {
display: none;
}
JS
$("body, html").on("scroll", function() {
var features_top = $("#features-icon").position().top;
var top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$(".navbar").show();
} else {
$(".navbar").hide();
}
});
I believe it has something has to do with the JS part of my code the problem why my navbar isn't displaying.
Your navbar is not displaying because you never reach the point where the top_of_window >= features_top is valid.
I've updated the fiddle in the comment. Check it now https://jsfiddle.net/8o7omnm7/33/
Your navbar will be displayed only when the <div id="features-icon">Hola</div> will have -1px from top. As long as you don't have that it will not be displayed