We Keep Coding

Adding an active class to the navbar

This is how my code looks like:
<div class="header-nav navbar-collapse collapse ">
<ul id="navigation" class=" nav navbar-nav">
<li>
Home
</li>
<li>
About Us
</li>
</ul>
</div>
I've been trying to add the active class to each of them when the user is on that specific page but no succes so far
Tis is how my script looks like:
var i = 0;
[].forEach.call(document.querySelectorAll('li > a'), function(nav) {
console.log(nav.pathname,window.location.pathname);
if (nav.pathname === window.location.pathname){
i = 1;
console.log(i);
nav.classList.add('active')
}
else{
console.log(i)
nav.classList.removeClass('active')
}
})
The active class is set on the "a" not on "li" and i don't know how to fix this. Maybe someone can help me?

In looking at the classes, it looks like you may be using Bootstrap. I added in those libs to the snippet, and updated some of the classes. I also added in another nav item with the href equal to js since that is the pathname for the snippet window. Otherwise it won't add the active class as there would not be a pathname that would be equal.
I also changed the nav items to pills, so you can see the active link easier.
var i = 0;
document.querySelectorAll('ul.nav > li > a').forEach((nav) => {
console.log({
navPathname: nav.pathname,
windowLocationPathname: window.location.pathname,
areEqual: nav.pathname === window.location.pathname,
});
if (nav.pathname === window.location.pathname) {
nav.classList.add('active')
} else {
nav.classList.remove('active')
}
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="navbar navbar-light bg-light">
<ul id="navigation" class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="js">JS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About Us</a>
</li>
</ul>
</div>

To target the parent element, you have a few options - my favorite is element.closest(selector) which takes a starting element and finds the closest containing parent that matches selector
let els = document.querySelectorAll('li > a');
els.forEach(el => {
el.addEventListener('click', e => {
els.forEach(a => a.closest('li').classList.remove('active'));
e.target.closest('li').classList.add('active');
})
})
li.active {
background-color: green;
}
<ul>
<li><a href='#'>link 1</a></li>
<li><a href='#'>link 1</a></li>
<li><a href='#'>link 1</a></li>
</ul>

Thanks for this, i merged the two responses and made it into one that works for me, this is the script that worked without even touching the classes into the nav-bar:
document.querySelectorAll('ul.nav > li > a').forEach((nav) => {
console.log({
navPathname: nav.pathname,
windowLocationPathname: window.location.pathname,
areEqual: nav.pathname === window.location.pathname,
});
if (nav.pathname === window.location.pathname) {
nav.closest('li').classList.add('active')
} else {
nav.closest('li').classList.remove('active')
}
})

Jquery Ui sortable items option select just first item

In my below code just the first #sort-item is sortable, others not. How can I solve it?
$('#sortable').sortable({
items:"#sort-item"
});
Html;
<ul id="sortable">
<li id="sort-item"></li>
<li id="sort-item"></li>
<li id="sort-item"></li>
<li id="sort-item"></li>
<li id="sort-item"></li>
</ul>
Edit:
I try;
$('#sortable').sortable({
items:"> #sort-item"
});
But steal not working
jsFiddle;
https://jsfiddle.net/seamqykd/1/

You cannot assign multiple items the same ID (https://www.w3schools.com/html/html_id.asp)
Use a class to select the items:
<ul id="sortable">
<li class="sort-item"></li>
<li class="sort-item"></li>
<li class="sort-item"></li>
<li class="sort-item"></li>
<li class="sort-item"></li>
</ul>
$('#sortable').sortable({
items:".sort-item"
});
or even better, use the element
$('#sortable').sortable({
items:"li"
});

First using id in multiple element is an html Sementic Error, Id's are used to be in one and only one html element ,
And here that's what causes the issue, just replace in the html your id by a class name and in your js code replace #sort-item by .sort-item see below working snippet :
$('#sortable').sortable({
items:".sort-item"
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable">
<li class="sort-item">aaa</li>
<li class="sort-item">bbb</li>
<li class="sort-item">ccc</li>
<li class="sort-item">ddd</li>
<li class="sort-item">eee</li>
</ul>

Script runs multiple times

I have this script that replaces content in a div using a menu structure.
This works fine, except it runs multiple times when clicking the various menu items. This makes the page load really slow.
Here is my structure:
$(document).ready(function() {
$('a.nav-link').click(function(e) {
var datalist = $(this).data('value');
var dataname = $(this).data('name');
console.log(datalist, dataname);
$(".content_div").hide().delay(500).fadeIn(500);
$(".content_div").load(dataname + ".php");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="nav nav-tabs" id="top-nav" role="tablist">
<li class="nav-item"><a class="nav-link active home" href="#" data-value="home" data-name="home">Aanwezig</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-value="vervoer" data-name="vervoer">Vervoer</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-value="extra" data-name="extra">Overige</a></li>
</ul>
</nav>
<div class="content_div">
</div>
And a screenshot of the console where you can see the script is multiplying...
I have no idea why this is happening. Any help would be really great...

It looks like your js code with the eventhandler is loaded more than once. You better figure out why.
Anyway, you can overcome this by using .off('click').on('click') (every time the code runs you cancel the existing eventhandler (off()) and set a new one (on()).
$('a.nav-link').off('click').on('click', function(e){ ...});

Like other already said, the script itself work fine, maybe because your script it's included more than once in your page.
$(document).ready(function() {
$('a.nav-link').on('click', function(e) {
e.preventDefault();
var datalist = $(this).data('value');
var dataname = $(this).data('name');
console.log('datalist : ', datalist);
console.log('dataname : ', dataname);
$(".content_div").hide().delay(500).fadeIn(500);
$(".content_div").load(dataname + ".php");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<nav>
<ul class="nav nav-tabs" id="top-nav" role="tablist">
<li class="nav-item"><a class="nav-link active home" href="#" data-value="home" data-name="home">Aanwezig</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-value="vervoer" data-name="vervoer">Vervoer</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-value="extra" data-name="extra">Overige</a></li>
</ul>
</nav>
<div class="content_div">
</div>
</body>
</html>

Put a log statement in your $(document).ready
$(document).ready(function() {
console.log('Ready');
$('a.nav-link').click(function(e) {});
});
To trace how many the document.ready is called.
To make sure the 'click' event on your link item to be call only once, you can change the code a little bit
$(document).ready(function() {
console.log('Ready');
$('a.nav-link').unbind('click').bind('click', function(e) {});
});
It is because of calling .click on an item means adding a new event handler on that item, not replacing.

How to disable bootstrap tabs

I have this nav tab
<ul class="nav nav-tabs" id="pointerTabs">
<li class="active aa"><a data-toggle="tab" href="#aa">01 Personal</a></li>
<li class="bb" ><a data-toggle="tab" href="#bb">02 Education</a></li>
<li class="cc"><a data-toggle="tab" href="#cc" >03 Experience</a></li>
<li class="dd"><a data-toggle="tab" href="#dd">04 Family</a></li>
</ul>
on page load am trying to disable all tabs except first tab.So tried adding property
$('.bb,.cc,.dd').prop('disabled','true');
But Its not working.
How to disable it?any help?How can I use data-toggleto enable and disable tabs here?

You can use pointer-events:none on all but the first li
.nav.nav-tabs li:not(:first-of-type) a {
pointer-events:none;
}

you can add this css in you li tag
class="disabledTab"
.disabledTab{
pointer-events: none;
}
in you html
<ul class="nav nav-tabs" id="pointerTabs">
<li class="active aa disabledTab"><a data-toggle="tab" href="#aa">01 Personal</a></li>
<li class="bb disabledTab" ><a data-toggle="tab" href="#bb">02 Education</a></li>
<li class="cc disabledTab"><a data-toggle="tab" href="#cc" >03 Experience</a></li>
<li class="dd disabledTab"><a data-toggle="tab" href="#dd">04 Family</a></li>
</ul>
add disabledtab css in your tab which you want to disabled.

You could use jQuery and remove the data-toggle and href attribute, and each time manipulate them on certain events.
Also, if all except one are to be disabled on page load, add a common class to all those that are to be disabled and then use the CSS property pointer-events
For eg :
.disable
{
pointer-events: none;
}

Bootstrap menu click event in jQuery

HTML :
<ul id="Mydatatabs" class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#details" id="TabDetailsLink">Personal
Details</a></li>
<li><a data-toggle="tab" href="#tab1" id="Tabtab1Link">tab1</a></li>
<li><a data-toggle="tab" href="#tab2" id="Tabtab2Link">tab2</a></li>
<li><a data-toggle="tab" href="#tab3" id="Tabtab3Link">tab3</a></li>
<li><a data-toggle="tab" href="#tab4" id="Tabtab4Link">tab4</a></li>
</ul>
JS :
$("#Mydatatabs li").click(function (e) {
e.preventDefault();
alert(1);
var MyID = $("#MyID").val();
alert(2);
switch ($(this).children(":first").attr("href")) {
alert(3);
case "#tab1":
});
Here I am unable to recieve the click event . Looks like I am making some mistake. Can someone show me the right way.

Because the JS is loaded first the DOM is not ready yet so it could not find the Mydatatabs list, you should put your code inside ready function :
$(function(){
//Your code here
})
Hope this helps.
$(function(){
$("#Mydatatabs li").click(function (e) {
e.preventDefault();
alert(1);
var MyID = $("#MyID").val();
alert(2);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul id="Mydatatabs" class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#details" id="TabDetailsLink">Personal
Details</a></li>
<li><a data-toggle="tab" href="#tab1" id="Tabtab1Link">tab1</a></li>
<li><a data-toggle="tab" href="#tab2" id="Tabtab2Link">tab2</a></li>
<li><a data-toggle="tab" href="#tab3" id="Tabtab3Link">tab3</a></li>
<li><a data-toggle="tab" href="#tab4" id="Tabtab4Link">tab4</a></li>
</ul>

So, first you have to put your jquery code inside a document ready statement. See the example:
$(document).ready(function(){
//... code
});
This is to be certain that the element to which the .click() event is bound has been created when the function executes.
For further explanation, look this response: Why should $.click() be enclosed within $(document).ready()?
And is not missing any end curly braces in this click event? In between switch case and end of the function?