Develop Reference

how to add class to list item

jQuery(function($) {
var path = window.location.href;
$('ul li').each(function() {
if (this.href === path) {
$(this).addClass('active');
}
});
});
<ul id="nav" class="nav navbar-nav">
<li class="active">A</li>
<li>Bs</li>
<li>C </li>
</ul>
I want to change the class="active" in list items on click.

<li id="a" >A</li>
Using $('#a').attr('class', 'active')
Output:
<li id="a" class='active' >A</li>

The problem is you're checking the li element for its href property, which doesn't exist. You need to check the a tag inside of the li element for the href property like this:
if ($(this).find('a').attr('href') === path) {
$(this).addClass('active');
}

You could use:
$(this).toggleClass('class1 class2')

If you are looking to change an active class and html pages this would be an effective way to do this.If you just want to change the active class use only the first 4 lines of code.
$( document ).ready(function() {
$(".nav li").click(function() {
$(".nav li.active").removeClass("active");
$(this).addClass("active");
if($(this).attr('id')=="yourfirstlinkid"){
document.getElementById("content").innerHTML='<object type="text/html" data="yoursite" height="90% width="90%" ></object>';
}else if($(this).attr('id')=="otherid"){
document.getElementById("content").innerHTML='<object type="text/html" data="othersite"></object>';
}else{
document.getElementById("content").innerHTML='<div/>';
}
});
});
And then all you need to do to your html is
<ul class="nav">
<li class="active" id="whateveryouwant">A</li>
<li id="whateveryouwant" >Bs</li>
<li id="whateveryouwant">C</li>
</ul>
<div align= "center" id="content"></div>
Another thing I want to add is never use herf for a nav bar because the navbar js code will change never allowing it to change it's current active class.

Change <li> class of the current link

I have following code to change the class of li if the browser url is the same string as the a href tag within that li.
The problem with my code is that it changes the class for all li elements, not just the ones containing the specific url.
Javascript :
$(document).ready(function() {
$("#subnav a").each(function() {
if ($(this).attr('href') == document.URL) {
$('li').addClass("selected");
}
});
});
html:
<div id="subnav">
<ul class="tabrow">
<li> Players
</li>
<li> Guilds
</li>
<li>Master Level
</li>
<li>Voters
</li>
<li>Online
</li>
</ul>
</div>
solution if anyone needed. Thanks to nem035
$(document).ready(function() {
$("#subnav a").each(function() {
if ($(this).attr('href') == document.URL) {
$(this).parent().addClass("selected");
}
});
});

Your issue is that you are using the selector $('li'), which selects all <li> elements, not just the parent of the current <a> whose url you are comparing.
This is probably what you should do:
if($(this).attr('href') == document.URL){
$(this).parent().addClass("selected");
}

Insert u php:
<?php
$url = $this->config->base_url.'rankings/all';
if($_SERVER['REQUEST_URI'] !== $url) echo(' class="selected" ');
?>

jQuery script wont add active class

I got this jQuery script that's supposed to add the class "active" to my li's, but it doesn't. The script is as follows:
jQuery(function() {
var pgurl = jQuery(location).attr('href');
console.log(pgurl);
jQuery("ul.pagesubmenu-ul li a").each(function(){
if(jQuery(this).attr("href") == pgurl)
jQuery(this).parent().addClass("active");
})
});
I really don't know why it isn't working. I'm trying to use it on this page (In the subnav below the main navigation).
Thanks in advance!

instead of looping all your links, you can directly select it with jquery by its href attribute:
$(function() {
$("a[href='" + location.href + "']").parent().addClass('active');
});
Note that location.href will return the full url, with host and scheme, if you are using relative urls in your site:
$(function() {
$("a[href='" + location.pathname + "']").parent().addClass('active');
});
Also, you can use some characters as wildcards:
= is exactly equal
!= not equal
^= starts with
$= ends with
*= contains
~= contains word
|= starts with prefix

It's not getting an exact match on any of those links. pgurl is showing http://xn--fnpark-pua9l.dk/konference-ny/, however the <a> tags don't have the trailing slash (http://xn--fnpark-pua9l.dk/konference-ny). Try cleaning up the url before comparing the strings. Here is a thread that will allow you to do that: https://stackoverflow.com/a/2541083/5169684

Why not working? Can you do a jsfiddle with your navigation structure...
HTML
<ul class="page">
<li>Link
<ul class="subpage">
<li>Sub Link</li>
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
JQUERY
jQuery(function() {
$("ul.page li ul.subpage li a").each(function(){
$(this).addClass('active');
});
});
https://jsfiddle.net/xp315ydq/

Display active tab's name in an span

I would like to show the active tab's name (text) in a span .active-class.
Example:
<ul class="tabs">
<li class="feinleinen active">feinleinen</li>
<li class="glatt">glatt</li>
</ul >
<span class="active-class">*Active_Tab_Name_Here (i.e. feinleinen) *</span>

What you want is either to have a click event each time a link is clicked and put the text in there?
Javascript:
function changeSpan(var newText){
document.getElementByClassName('active-class').innterHTML(newText);
}
When the above you need to initialise the function. this can be done in the anchor within the list item.
<li><a href='#' onclick='changeSpan("new item name!");'>
Don't forget the hash (#) within the href! This stops the default action, in layman's terms.
With jQuery this can be a bit simpler
$('a','ul.tabs>li').click(function(){//a classname would be a better selector
$('.active-class').appendTo($(this).innerHTML());//can also use $(this).text();
return false;//also stops default action
});

FIDDLE:
HTML
<ul class="tabs">
<li class="feinleinen active">feinleinen
</li>
<li class="glatt">glatt
</li>
</ul>
<span class="active-class">active tab name here</span>
SCRIPT
$('.active-class').text($('.tabs .active').find('a').text());
I guess you want this on click , therefore bit updation to my above code here :-
$('.tabs a').click(function () {
$('.tabs li').removeClass('active');
$(this).parent('li').addClass('active');
$('.active-class').text($(this).text());
});

fiddle: http://jsfiddle.net/x97g8sc7/
$(".active-class").text($(".tabs .active").text());

Change element css based on contents through Javascript

Suppose I have a vertical menu that is coded like this:
<ul class="sub-menu">
<li id="menu-item-1" class="menu-item">
Page1
</li>
<li id="menu-item-2" class="menu-item">
</li>
<li id="menu-item-3" class="menu-item">
Page3
</li>
</ul>
As you can see, the anchor element to page2 doesn't contain any text. Therefore, I want to hide it from the menu. So I'm looking for a javascript solution that does something like this:
if (content of anchor tag equals " ") then
set anchor's parent list element css to visiblity:hidden;
Note that I can't use document.getElementById on this one because the list id's are automatically generated and may change over time. So how do I get to the content of the anchor tag and set the correct list item's CSS?
Thanks.

var link=document.getElementsByTagName("a");
for(var i=0;i<link.length;i++)
if(link[i].innerHTML.replace(/^\s+|\s+$/g, "")==='')
link[i].parentNode.style.display="hidden";
Working Demo

You could use getElementByTagName('li') and then test that class="menu-item'
See this sample.

If you are using jQuery, you can do something like:
$("li").each(function() {
if ($(this).find("a").text() == "")
{
$(this).css('display','none');
}
});

You could use something like this..
$('.sub-menu a').each(function () {
if (this.innerHTML == " ") {
this.parentNode.style.visibility = 'hidden';
}
})