Hi and thanks in advance for your help!
I have previously used JS to add an active class to an element if the corresponding URL shows.
I am trying to take what I have done in the past and edit it.
I am trying to add an active class to an element if the href attribute equals '#tab1' for example. Rather than if the URL matches.
Please see the existing JS below that I am trying to work from, I have tried a few things including a getelementbyID rather than selecting the href but I'm lost.
$(document).ready(function () {
const $links = $('.hs-mega-menu ul li a');
$.each($links, function (index, link) {
if (link.href == (document.URL)) {
$(this).addClass('active');
}
});
});
An example of one of the nav-links I am trying to select and apply the active class too are below:
<li class="nav-item"> <a class="nav-link g-py-10--md g-px-15--md" href="#tab1" role="tab" data-toggle="tab">Printed Stationery<i class="g-ml-10 fa-solid fa-caret-down d-sm-none"></i></a> </li>
There are a few ways to do this, you can use a function like you have or you can filter or just use a selector for the attribute. Here are examples of the latter two.
$(function() {
let testurl = "#tab1";
const $links = $('.hs-mega-menu ul li a');
$links.filter(function(index, link) {
return $(this).attr('href') == testurl;
}).addClass("active");
$links.filter("[href='" + testurl + "']").addClass("active-test")
});
.active {
color: green;
}
.active-test {
background-color: #ffddff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hs-mega-menu">
<ul>
<li class="nav-item"> <a class="nav-link g-py-10--md g-px-15--md" href="#tab1" role="tab" data-toggle="tab">Printed Stationery<i class="g-ml-10 fa-solid fa-caret-down d-sm-none"></i></a> </li>
<li class="nav-item"> <a class="nav-link g-py-10--md g-px-15--md" href="#tab1" role="tab" data-toggle="tab">Printed Stationery<i class="g-ml-10 fa-solid fa-caret-down d-sm-none"></i></a> </li>
<li class="nav-item"> <a class="nav-link g-py-10--md g-px-15--md" href="#tab2" role="tab" data-toggle="tab">Printed Stationery<i class="g-ml-10 fa-solid fa-caret-down d-sm-none"></i></a> </li>
</ul>
</div>
Related
I am trying to add js to my navbar, I want to make it like if I click another button, the class of that button become 'active', and the others become normal one
<ul>
<li><a class="nav-link active" href="">Home</a></li>
<li><a class="nav-link" href="">Semester</a></li>
<li><a class="nav-link" href="">Course</a></li>
<li><a class="nav-link" href="">Class</a></li>
<li><a class="nav-link" href="">Lecturer</a></li>
<li><a class="nav-link" href="">Student</a></li>
<li><a class="nav-link" href="">Student Attendance</a></li>
$(document).ready(function() {
$(".nav-link").click(function () {
$(".nav-link").removeClass("active");
$(this).addClass("active");
});
});
do this and move the .nav-link class to li tag
$(document).ready(function() {
$(".nav-link").click(function () {
$(this).addClass("active").siblings().removeClass('active');
});
});
This an effective way to create visual and operational navigation bars on web pages. The code adds the active class to li that was clicked and remove from every other li within its parent ul
- List item
<ul class="nav nav-tabs-outline">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#shot-Title">Title</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Description" id="disco">Description</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Details">Details</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Skills">Exprtise and Skills</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Budget">Budget</a>
</li>
</ul>
JavaScript
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#jobpostname').keyup(function () {
if ($(this).val() == '') {
//Check to see if there is any text entered
// If there is no text within the input then disable the button
$('#disco').prop('disabled', true);
} else {
//If there is text in the input, then enable the button
$('#disco').prop('disabled', false);
}
});
});
</script>
There is a input element in title tag , what i want to do is when i type something in title input the description link should get activated ,
is there a way to active the 'nav-link disabled' using jquery?
Hi Aksingh welcome to Stackoverflow's community.
In your code disabled and active are classes not attributes or properties.
So you can use jQuery's addClass and removeClass methods to solve your problem
try this code..
$(document).ready(function(){
$('#jobpostname').keyup(function () {
if ($(this).val() == '') {
//Check to see if there is any text entered
// If there is no text within the input then disable the button
$('#disco').addClass('disabled');
$('#disco').removeClass('active');
} else {
//If there is text in the input, then enable the button
$('#disco').addClass('active');
$('#disco').removeClass('disabled');
}
});
});
It looks ridiculous to do so many tasks on a button click while every button should have its own events:
function allStories() {
$('#zero-md').hide();
$('.container-aboutme').hide();
$('.container-allstories').show();
$('.container-allstories').load("pages/allstories.html");
$("#home").removeClass("nav-link active").addClass("nav-link");
$("#aboutme").removeClass("nav-link active").addClass("nav-link");
$("#allposts").removeClass("nav-link").addClass("nav-link active");
}
function aboutMe() {
$('#zero-md').hide();
$('.container-allstories').hide();
$('.container-aboutme').show();
$('.container-aboutme').load("pages/about.html");
$("#home").removeClass("nav-link active").addClass("nav-link");
$("#allposts").removeClass("nav-link active").addClass("nav-link");
$("#aboutme").removeClass("nav-link").addClass("nav-link active");
}
<li class="nav-item">
<a class="nav-link" id="allposts" onclick="allStories()" href="#">All posts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutme" onclick="aboutMe()" href="#">About me</a>
</li>
Is there is a better, more effective way to organize such events with less code?
You mean this
$("#nav").on("click",".nav-link",function(e) {
e.preventDefault(); // stop the link
const id = this.id;
const $thisContainer = $('.container'+id);
$('#zero-md').hide();
$('.container').hide(); // hide all containers
$thisContainer.load("pages/"+id+".html",function() { // perhaps not load if already loaded
$thisContainer.fadeIn("slow");
}) ;
$(".nav-link").removeClass("active")
$(this).addClass("active")
})
<ul id="nav">
<li class="nav-item">
<a class="nav-link" id="allposts" href="#">All posts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="about" href="#">About me</a>
</li>
</ul>
Yes. Try to keep your code DRY (don't repeat yourself.)
Add an event listener in your JS.
Use e.target to determine what was clicked.
Chain your commands together when they're operating on the same elements.
Don't remove a class and then add the same class back. Just remove the one you want to get rid of.
I've added some stand in elements since not everything was present in your HTML.
$('.nav-link').click( (e)=>{
let theLink = $(e.target).attr('id');
const container = '.container-'+$(theLink).attr('id');
$('#zero-md').hide();
$('.container').hide();
$(container).show().load("pages/"+theLink+".html");
alert('loading: pages/'+theLink+'.html');
$("#home").removeClass("nav-link active").addClass("nav-link");
$(".nav-link").removeClass("active");
$("#"+theLink).addClass("active");
});
.active {
font-size: 1.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="nav-item">
<a class="nav-link" id="allstories" href="#">All posts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutme" href="#">About me</a>
</li>
<div class="container container-allstories">All Stories</div>
<div class="container container-aboutme">About Me</div>
<div id="zero-md">Zero MD</div>
I have a side menu and I want to display the active class when it loads the page.
The obvious answer would be to do this with jquery in every page but it repeats tons of code and it's boring.
So I used this in a app.js globally:
//Active side-menu
$('.nav-item').click(function () {
$(this).addClass('active');
});
But this doesn't work because it puts active and when it loads the page this class is removed after loading the html
What can I do?
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
<img src="../resources/img/icons/create-icon.png" alt="" class="menuIcon">
<span class="menu-title">Create Environment</span>
</a>
</li>
//A lot of li elements
<ul>
I think that on page load, you should get the url, try to find it on the menu with javascript and then add the active class to the nav-item, something like this:
$(document).ready(function() {
var url = window.location.pathname + window.location.search;
$('ul.nav a.nav-link[href="' + url + '"]').parent().addClass('active');
});
A little example, you might need to tweak the url part:
$(document).ready(function() {
var url = 'general-setup';//window.location.pathname + window.location.search;
$('ul.nav a.nav-link[href="' + url + '"]').parent().addClass('active');
});
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
<img src="../resources/img/icons/create-icon.png" alt="" class="menuIcon">
<span class="menu-title">Create Environment</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="general-setup2" onclick="gitLabFetch()" id="createEnviromentTab">
<img src="../resources/img/icons/create-icon.png" alt="" class="menuIcon">
<span class="menu-title">Create Environment</span>
</a>
</li>
//A lot of li elements
<ul>
Ok, so after further thought i have come up with a solution.
An approach i would take is to add a data attribute to anchor onto, this gives you the freedom to define routes that your list items link to and style them accordingly based on route...
(() => {
$('li')
.filter((i, li) => $(li).data('route') === window.location.pathname)
.addClass('active')
})()
<li data-route="/">HOME</li>
<li data-route="/friends">Friends</li>
<li data-route="/profile">Profile</li>
<li data-route="/blog">Blog</li>
As you can see, i run over all the list-items and filter out all the items that do not have data-route attributes that match the window.location.pathname, after i am left with the filtered list, i apply an active class to the matched items.
So instead of adding an active class to the navbar using HTML I instead wanted to add it through jQuery but my code doesn't seem to work.
$('.navbar-nav li a[href="' + location.pathname + '"]').addClass('active');
<nav>
<ul class="navbar-nav">
<li class="nav-item" >
<a class="nav-link active" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Wat is het?</a>
</li>
</ul>
</nav>
Can anybody help me out?
I think what do you need is window.location.href.
Something like this:
var pathname = window.location.href;
$('.navbar-nav li a').attr('href',pathname).addClass('active');
Check this example: https://jsfiddle.net/tbx56gtL/7/
Maybe you can do it like this:
$(function() {
var currentLoc = window.location.href;
if(/PageYouWant/.test(currentLoc) {
$('.navbar-nav li a').addClass('active');
}
});
If you want to set active in anchor tag you can do one of the following options.
Asign ids to every a tag
Asign a data attrib and add a class toggleClassX
Use $(this).addClass("active")
The following are the examples of each recomendation :
1 html:
<nav>
<ul class="navbar-nav">
<li class="nav-item" >
<a class="nav-link active" id="myId1" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="myId2" href="">Wat is het?</a>
</li>
</ul>
</nav>
2 html:
<nav>
<ul class="navbar-nav">
<li class="nav-item" >
<a class="nav-link toggleClass1 active" data-tclass="1" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link toggleClass2" data-tclass="2" href="">Wat is het?</a>
</li>
</ul>
</nav>
3 html: your structure is ok for the last example
1 js:
$("element").click(function(){
$("#myId1").addClass("active")
});
2 js:
$(".nav-link").click(function(){
var tclass = $(this).data("tclass)
$(".toggleClass"+tclass).addClass("active")
});
3 js:
$(".nav-link").click(function(){
$(this).addClass("active")
});
Hope the above answer your question.