Develop Reference

Select an element if the href value is a specific word

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>

How to manage more effectively html button click events?

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>

jQuery adding active class to navbar doesnt work

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.

Bootstrap nav pills - 'active' class doesn't work in opened modal

I have following code for nav-pills component:
<ul id="steps" class="nav nav-pills form-steps">
<li class="active"><a data-toggle="pill" href="#options"></a></li>
<li><a data-toggle="pill" href="#payments"></a></li>
</ul>
This is how the look of active a is made (basically it's just a circle filled with special color):
.form-steps > li.active > a {
background-color: #931f2a;
}
And here's code for a regular a:
.promoter-form-steps > li > a {
border: 2px solid #931f2at;
height: 30px;
width: 30px;
border-radius: 100%;
}
I suppose that by adding .active class to corresponding li element makes a element filled with color, but it doesn't when I open modal where this component is placed for the fist time. When I open modal for the second time after I click on another link, I see correct behavior, i.e .active class is filled with color. It's an SPA and I have another nav-pills like this with exact markup and it works just fine and I don't quite understand why this behavior doesn't work on second nav-pills. I double checked that class names and ids don't repeat each others and I am sure that no custom js was involved into this.
Can you please give me a direction to inspect what I did wrong? Thanks in advance!

Here's the recommended format as determined by Twitter Docs:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Your list tags need to have a class of nav-item and your anchors need a class of nav-link before it can use the active class

jquery click event on bootstrap 3 tabs

I have this code:
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>
I want to capture the any tab click event and alert the id of the tab being activated by the click. How is this done?

$('a[data-toggle=tab]').click(function(){
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>

I would use the bootstrap events API instead of adding additional click handlers
$('.yourTabsClass a').on('show.bs.tab', function(e){
alert('ID clicked = ' + e.target.id)
});
Reference: bootstrap tabs docs
DEMO

$("a[data-toggle='tab']").click(function() {
alert($(this).attr("id"))
});
Here is jsfiddle