We Keep Coding

How can I active link in Navigation Bar when I click any item located in that bar?

I have a problem about changing the class attribute as active when I click any selected item in the navigation bar.
I wrote this js code which is shown below to implement this process but it didn't work.
Here is my HeaderPartialView part.
.... css files
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here is my _Layout.cshtml part.
....
#{
Html.RenderAction("HeaderPartial", "Home");
}
#{
Html.RenderAction("NavbarPartial", "Home");
}
....
#{
Html.RenderAction("JSFilesPartial", "Home");
}
Here is my JSFilesPartial files.
<script src="~/Content/SiteLayout/assets/js/navigation-bar.js"></script>
Here is my navigation-bar.js file.
$(document).ready(function () {
var current = location.pathname;
$('.navigation-bar li a').each(function(){
var $this = $(this);
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
});
Here is NavbarPartial file.
<nav id="navbar" class="navbar">
<ul class="navigation-bar">
<li><a class="active" href="/Home/Index">Home</a></li>
<li>About Us</li>
<li>Projects</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
How can I fix the issue?

$(document).ready(() => {
$(".somClass li a").on('click', (e) => {
$(".somClass li a").removeClass('active');
$(e.target).addClass('active');
});
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="somClass">
<li><a class="active" href="#">link 1</a></li>
<li>link 2</li>
<li>link 3</li>
</ul>
Since you have active class as prop of anchor element you should try with .navigation-bar li a instead

You're adding the active class on the li element. It should be adding to the a element instead. The following should work:
<script type="text/javascript">
$(document).ready(function () {
$(".navigation-bar li a").on("click", function () {
$(".navigation-bar li a").removeClass("active");
$(this).addClass("active");
});
});
</script>
But it will fail because you're switching pages, and the javascript is reloaded every time you click in a anchor element.
I think this is what you're looking for:
var current = location.pathname;
$('.navigation-bar li a').each(function(){
var $this = $(this);
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
It basically searches with navigation element is currently active, adding the active class on the a element.

Here is the solution:
Navbar
<nav id="navbar" class="navbar">
<ul class="navigation-bar">
<li>AnaSayfa</li>
<li>Hakkımızda</li>
<li>Hizmetler</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Biz Kimiz</li>
<li>Bize Ulaşın</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
Js file
$(document).ready(function () {
var current = location.pathname;
$('.navigation-bar li a').each(function () {
var $this = $(this);
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
});

jQuery attribute auto switch

am trying to make a svg animation attribute switch with a setTimeout function.
Part of animation works when i add the "jQuery('#animation2').attr('xlink:href', '#core_type');" in setTimeout function but when i add the variable it does nothing. here is the code:
var AttributeOne = jQuery('#animation2').attr('xlink:href', '#core_type');
var AttributeTwo = jQuery('#animation1').attr('xlink:href', '#core_type');
var AttributeSwitch = AttributeOne;
(function theLoop (i) {
if(AttributeSwitch == AttributeOne) {
AttributeSwitch = AttributeTwo;
} else {
AttributeSwitch = AttributeOne;
}
setTimeout(function () {
AttributeSwitch
if (--i) {
theLoop(i);
}
}, 6000);
})(100);

Try this demo, it is pretty much what you want. Add your own CSS to it.
HTML :
<div id="tabs">
<ul class="tabs" id="tabsnav">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div id="tab-1">
Contents for tab 1
</div>
<div id="tab-2">
Contents for tab 2
</div>
<div id="tab-3">
Contents for tab 3
</div>
<div id="tab-4">
Contents for tab 4
</div>
</div>
JAVASCRIPT:
jQuery(document).ready(function () {
jQuery("#tabs > div").hide(); // hide all child divs
jQuery("#tabs div:first").show(); // show first child div
jQuery("#tabsnav li:first").addClass("active");
jQuery(".menu-internal").click(function () {
jQuery("#tabsnav li").removeClass("active");
var currentTab = jQuery(this).attr("href");
jQuery('#tabsnav li a[href="' + currentTab + '"]')
.parent()
.addClass("active");
jQuery("#tabs > div").hide();
jQuery(currentTab).show();
return false;
});
// Create a bookmarkable tab link
hash = window.location.hash;
elements = jQuery('a[href="' + hash + '"]'); // look for tabs that match the hash
if (elements.length === 0) {
// if there aren't any, then
jQuery("ul.tabs li:first").addClass("active").show(); // show the first tab
} else {
elements.click();
} // else, open the tab in the hash
});

Make a clickable link

<script>
$(document).ready(function () {
var li = $('.someDiv li');
li.toggle(function () {
li.children("div").hide();
$(this).children("div").fadeIn(700);
}, function () {
$(this).children("div").fadeOut(300);
});
});
</script>
<div class="someDiv">
<ul>
<li>Title <div style="display:none;">Description Something</div></li>
<li>Title <div style="display:none;">Description Something</div></li>
<li>Title <div style="display:none;">Description Something</div></li>
</ul>
</div>
There are links inside divs, but when a div is visible the links are not clickable, because the clicking just toggles the div.
How make the links work?

I would not use toggle, check the event to see if it is an anchor, if it is ignore the click.
$(function () {
$('.someDiv').on("click","li", function(e){
var li = $(this);
if ( $(e.target).is("a") ) return;
li.toggleClass("open");
var divs = li.children("div").stop();
if(li.hasClass("open")) {
divs.fadeIn(700);
} else {
divs.fadeOut(300);
}
});
});

Check if next element has a specific class

html structure:
<div class="row">
<div class="span"></div>
<div class="span"></div>
<div class="navMenu">
<ul>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
</div>
Then I am adding a "new" div just after the above html:
<div class="row">
<div class="span"></div>
<div class="span"></div>
<div class="navMenu">
<ul>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
</div>
<div class="new"></div>
$(".navMore li a").each(function() {
$(this).on("click", function() {
$('<div class="new"></div>').insertAfter($(this).closest('.row'));
$('<div class="span"></div>').appendTo('.new');
});
});
Finally I need to check if a div with class .new exists RIGHT AFTER the div containing the menu, and if so add a .span div in it, and if a div with class .new doesn't exist, then create it and then insert a div with class .span in it:
$(".navMore li a").each(function() {
$(this).on("click", function() {
if($(this).next().hasClass("new")){
$('<div class="span"></div>').appendTo('.new');
}
else {
$('<div class="new"></div>').insertAfter($(this).closest('.row'));
$('<div class="span"></div>').appendTo('.new');
}
});
});
It is IMPORTANT that the new div with class .new is a div with such a class right next the div container the menu. The reason why is because I will many menus with many different .row divs, so I wanted to target the correct one.
The above final code doesn't work tho

You don't need the each loop - also you notice how .new and .row are siblings?
$(".navMore li a").on("click", function() {
var $el = $(this);
var $row = $el.closest('.row'); // <-- get to row first
if($row.next('.new').length){ // check next element
$('<div class="span"></div>').appendTo('.new');
}
else {
$('<div class="new"></div>').insertAfter($row);
$('<div class="span"></div>').appendTo('.new');
}
});
You also have your classes mixed up.. So you need to make sure they match
<div class="navMenu"> <!-- <-- here -->
<ul>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
and
$(".navMore li a") // <-- here

The foreach loop is unnecessary. You can just bind a click event to all the items in a selector directly rather than looping through a set and binding them individually.
I would bind the click event to the .row divs since the click event will bubble up ... this will make your selectors very easy to test if the next sibling has a .new class.
$('.row').click(function() {
var newDiv = $(this).next();
if(newDiv.hasClass('new')){
$('<div class="span"></div>').appendTo(newDiv);
}
else {
newDiv = $('<div class="new"></div>');
newDiv.insertAfter($(this));
$('<div class="span"></div>').appendTo(newDiv);
}
});
Edit:
The reason why I chose to bind to the .row is because part of the DOM rules about how events propagate up to their parents says that if someone clicks an Anchor tag then it will send the event up the parents in the DOM. So this means that if we are listening for a click on a parent of an tag, it will appear as if the click came from that said parent (in this case, a .row div).

$(".navMenu ul li a").on("click", function () {
if ($(this).closest('.row').next('.new').length) {
$('<div class="span"></div>').appendTo('.new');
} else {
$('<div class="new"><div class="span">This is a span.</div></div>').insertAfter($(this).closest('.row'));
}
});

Hide selected by anchor's href

I'm trying to figure out a function that will allow me to hide divs and show them if referring link is clicked.
Hard to explain but here is what I am looking for:
<ul>
<li>Link 1</li>
<li class="active">Link 1</li>
<li>Link 1</li>
<ul>
<div id="id-1">Some content</div> // Hidden
<div id="id-2">Some content</div> // This should only show in document
<div id="id-3">Some content</div> // hidden
Whenever other anchor is being clicked other divs should hide.
I hope his make sense and thank you for your help in advance
Dom

You can use something like this (untested so may need tweaking):
$(document).ready(function() { //fires on dom ready
$("a").click(function(e) { //assign click handler to all <a> tags
$(".classForYourDivs").hide(); //hide all divs (put class on ones you want to hide)
var element = $(e.target);
var href = element.attr("href"); //get the attribute
$(href).show(); //show the relevent one
return false; //important to stop default click behavior of link
});
});
Incidentally you should consider using something other than the href to store this information... take a look at the docs for the jquery data() function

Add a class to the ul and the divs.
<ul class="myUL">
<li>Link 1</li>
<li class="active">Link 1</li>
<li>Link 1</li>
<ul>
<div id="id-1" class="myDivs">Some content</div> // Hidden
<div id="id-2" class="myDivs">Some content</div> // This should only show in document
<div id="id-3" class="myDivs">Some content</div> // hidden
then in CSS,
.myDivs { display: none; }
and Try below js code,
var $myDivs = $('.myDivs');
$('.myUL a').on('click', function () {
$myDivs.hide();
$($(this).attr('href')).show();
});
DEMO: http://jsfiddle.net/LYKVG/

$("body").on("click","a", function(){
var divtoshowselector = $(this).attr("href");
$(divtoshowselector).show().siblings().hide();
})

http://jsfiddle.net/
html
<ul>
<li>Link 1</li>
<li class="active">Link 2</li>
<li>Link 3</li>
<ul>
<div id="id-1">Some content 1</div>
<div id="id-2">Some content 2</div>
<div id="id-3">Some content 3</div>​
css
div {display: none;}
javascript/jquery
$("a").click( function(e) {
e.preventDefault();
var elId = $(this).attr('href');
$('div').hide();
$(elId).show();
});​

I've set up a fiddle for you, check out: http://jsfiddle.net/UsGag/
function currentActive()
{
return $("li.active a").attr("href");
}
$("div:not(" + currentActive() + ")").hide();
$("li a").on("click", function()
{
//hide old active div
$("div" + currentActive()).hide();
$("li").removeClass("active");
//activate new div
$(this).parent().addClass("active");
$("div" + currentActive()).show();
});
Hope this helps you, extend to your own needs. And just for completeness: Don't use the - in ids / classnames.
​

Try
$("a").click( function( ) {
var elId = $(this).attr("href");
$(elId).show().siblings("div[id^=id-]").hide();
});
Fiddle here