These group of links are my nav elements. var make_button_active removes and inserts class active once clicked into the link. With CSS, class active assigns an orange color to the text of the link. I have another link which is outside of this group. Its a logo as link which goes to #home. I would like that once this is clicked the class active is removed from the links inside the ul.menu. This way the nav elements wont remain colored in orange when #home is clicked. I've tried it alone but I'm a beginner with javascript.
Could you help me with this quest?
HTML:
<nav>
<div id="logo">
<img src="_img/logo.png" alt="DR logo" />
</div>
<div id="categories">
<ul class="menu">
<li>ABOUT ME</li>
<li>SHOWCASE</li>
<li>HOW DO I WORK</li>
<li>LETS MEET</li>
</ul>
</div>
<hr>
</nav>
CSS:
.menu li.active a {
color: #ff530d;
}
JQUERY:
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
);
//Add the clicked button class
$(this).addClass('active');
}
var classOut = function()
{
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
</script>
I rewrote your entire JavaScript, does this help?
I changed your JavaScript to:
$(document).ready(function()
{
$('.menu a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
$(this).addClass('active');
});
$('#logo > a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
});
});
At first: jQuery !== JavaScript
Also, #home wont select your home link, because it does not select the href, but the id.
Use instead $("#logo a").click(classOut);
Also, your function make_button_active should look something like this:
var make_button_active = function() {
$('.active').removeClass('active');
$(this).addClass('active');
}
You don't need to iterate over all the siblings, your active can only be on one element at once, you can just select this and remove the class before setting it on the newly selected element.
Finally, you do not necessarily have to do a function expression var make_button_active = function(){...}, a function declaration is completely okay in your case: function make_button_active(){...}. However, often it is good to use function, and not like Sam did using anonymous functions, because you can then reuse those functions easily.
Your entire script should look like this:
<script type="text/javascript">
function make_button_active(){
$('.active').removeClass('active');
$(this).addClass('active');
}
function classOut(){
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#logo a").click(classOut);
});
</script>
There is no element with ID of home in your markup:
<img src="_img/logo.png" alt="DR logo" />
You are using ID selector and your selector doesn't select the element with #home href attribute. You can add ID to your element or use attribute selector:
$("a[href='#home']").click(classOut);
Also you don't need to use each method:
var make_button_active = function() {
$(this).addClass('active').siblings().removeClass('active')
}
var classOut = function() {
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
http://jsfiddle.net/hJdXU/
Related
$('.active').click(function() {
$(this).toggleClass('active');
$(this).toggleClass('active');
});
I know this is totally wrong but I'm new and trying to learn; What I'm trying to do is toggle the active class for the <li> onclick() really appreciate any help. Thankyou.
<ul class="nav nav-tabs">
<li role="presentation" onclick="toggleClass();">Hi</li>
</ul>
You need to create a function toggleClass
JS
Create a new function toggleClass which will accept the current clicked element
function toggleClass(elem) {
$(elem).toggleClass('active');
};
HTML
add toggleClass function to onclick handler & pass the current element as an argument
<li role="presentation" onclick="toggleClass(this);">Hi</li>
CSS
Create a class .active
.active {
background: yellow;
}
DEMO
What you need to do is set all other elements's classes to inactive,
$('.active').className = 'inactive';
$(this).className = 'active';
That top expression will affect all elements with the class and the bottom one will change the current clicked element.
try this:
$("nav li").click(function() {
$(this).toggleClass("active");
});
if only for <li> elements with active class
$("nav li.active").click(function() {
$(this).toggleClass("active");
});
This is not how Bootstrap is supposed to work. If you are using bootstrap, use their tab js component. more on it here
Basically you add a listener on those LI tags like this: (from the docs)
$('.nav.nav-tabs li').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
The way you did, you were toggling the state twice so in the end it would stay the same.
I think instead of $('.active').click(function()), you should target li click as
$( "li" ).click(function() {
$(this).toggleClass("active");
});
fiddle:
http://jsfiddle.net/wVVbT/142/
Here is a link for description about how to use .toggleClass.
toggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
DEMO:
$('li').click(function() {
$(this).toggleClass('active');
})
ul li{
float: left;
margin-right: 20px;
}
.active {
background: #69a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> Link A</li>
<li>Link B</li>
</ul>
I'm writing a small website where I already implemented a JavaScript code to change to content of a div if an item in the menu bar is clicked. I know have the problem, that if someone refreshes the website, they are at the start-page again. I want to change this so the name of the menu item is added to the url with a # in front of it. Wikipedia does this in some way if you click on an item in the content-overview of an article.
My question is now how I can achieve this?
This is my current JavaScript code:
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
});
});
And this the menu part of my HTML:
<div id="menu">
<ul>
<li>Über mich</li>
<li>Kinesiologie</li>
<li>Körbler Symbole</li>
<li>Energiearbeit</li>
<li>Ernährungsberatung</li>
<li>Diätberatung</li>
<li>Food Coach</li>
<li>Heilkräuterberater</li>
<li>Heilkräuterprodukte</li>
<ul>
<li>Salben</li>
<li>Öle</li>
<li>Pflege</li>
<li>Bad/Dusche</li>
<li>Allerlei</li>
</ul>
</ul>
</div>
And sorry for the bad description, I have absolutely no idea how to call this.
You can try this:-
At first add an attribute in the menu.
<div id="menu">
<ul>
<li data-btn-name="ueber_mich">Über mich</li>
<li data-btn-name="kinesiologie">Kinesiologie</li>
</ul>
</div>
At the time of clicking on the menu change the location hash of the page
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
window.location.hash = $(this).attr('data-btn-name');
$('#content').load(page);
});
});
At the time of opening the page first time, load the content depending on the hash.
$('document').ready(function(){
if(window.location.hash){
$('#content').load('./content/'+window.location.hash+'.html');
}
})
you can simply use this if text name is same as file name:
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
window.location.hash = $(this).text();// if you want to show text of the li
console.log($(this).text());
$('#content').load(page);
});
});
I want to activate selected link with jquery. But my links are grouped with css classes in different divs.
<div class="menu-container">
<div class="button-group">
clients
supplier
</div>
<div class="button-group">
supplier
</div>
</div>
Jquery is like this.
$('div.menu-container').on('click','.button-group > a', function(){
$(this).addClass('active').siblings('a').removeClass('active');
})
I want to change selected link to active css class and others not. But my button-group is separating a tags. So two a link is appearing as active.
working app jsfiddle is here.
You are removing the active class only for siblings element. Simply remove the active class for all anchor element like below. Update your script like below.
$('div.menu-container').on('click','.button-group > a', function(){
$('.button-group > a').removeClass('active');
$(this).addClass('active');
})
DEMO
EDIT:
According to your new requirement if I click the second time to active link, it should be deactive, update your jquery like below.
$('div.menu-container').on('click','.button-group > a', function(){
if($(this).hasClass('active'))
{
$(this).removeClass('active');
}
else
{
$('.button-group > a').removeClass('active');
$(this).addClass('active');
}
});
DEMO
you need to go further upwards to reach them, try this:
$('div.menu-container').on('click','.button-group > a', function(){
$(this).closest('.menu-container').find('a.active').removeClass('active');
$(this).addClass('active');
});
Try this : remove active class from all anchor links present under .menu-container and then apply 'active' class to current clicked element.
$('div.menu-container').on('click','.button-group > a', function(){
$('div.menu-container').find('.active').removeClass('active');
$(this).addClass('active');
});
Demo
Try like this:::
$(document).ready(function(){
$("a[id ^= 'menu']").on('click',function(){
$("a[id ^= 'menu']").removeClass('active');
$(this).addClass('active')
})
})
DEMO
please see solution,
$('div.menu-container').on('click','.button-group > a', function(){
$('div.menu-container').find('a.active').removeClass('active');
$(this).addClass('active');
})
I have three menu items here:
JSFIDDLE: FIDDLE LINK
<div class="home-content">
<div class="menu-bar">
<ul class="nav nav-tabs">
<li class="active">Blue<sup>beta</sup></li>
<li>Green<sup>beta</sup></li>
<li>Red</li>
</ul>
</div>
By default link blue is active.
I want whenever any link green or red is clicked, it should be active
Color of the label should be changed as per the link selected
I am facing trouble in this points.
You could add a DATA color on your li like that :
<li data-color="#0f0">Green<sup>beta</sup></li>
then use this code :
$(function () {
$(".menu-bar li a").click(function () {
$('.active').removeClass('active'); //Remove the current active item
var color = $(this).closest('li').addClass('active').data('color'); //add class the the target and save his data attribute
$("#l1").css("color", color); //Change color
});
});
Fiddle : http://jsfiddle.net/ZjgV4/6/
Something like this?
$(function () {
$(".menu-bar li a").click(function () {
$(".menu-bar li").removeClass("active");
$(this).parent().addClass("active");
});
});
http://jsfiddle.net/3mhCW/1/
Without completely doing everything, this should point you on the right track. A few things to note about your code - You should pass in the e event, to the click handler and use jQuery's e.preventDefault(); to stop the link. Also, you need to quote the value in the css function. .css("color", "red") otherwise you will get an undefined error that red is not defined. Instead of manipulating the css of the elements, I would use add/removeClass respectively and style the elements with css.
$(function () {
$(".menu-bar li a").click(function (e) {
e.preventDefault(); // stop the link from following the href
// remove the active class from everything
$(".active").removeClass("active");
// $(this).css("color", "red");
$(this).addClass("active");
});
});
I included the code here.
basically, i inserted the color name to a class each color has its own class and each LI has a global attribute data-* with the value of the color (the name of the class)
HTML:
add to all the li the attribute data-color="blue"
Add CSS:
.blue{
background-color:blue;
}
.green{
background-color:green;
}
.red{
background-color:red;
}
jQuery:
$(function () {
$(".menu-bar li a").click(function () {
$('.menu-bar li.active').removeClass('active');
$(this).parent().addClass('active');
$("#l1").attr('class',$('.menu-bar li.active').attr('data-color'));
});
});
I need help help editing the following JavaScript.
<script>
$('.nav li a').on('click', function() {
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
});
</script>
===================================================================
In addition to the existing functionality, I need "link2" to become "active" when "link1" is clicked. See HTML below.
<h1 class="brand">Brand</h1>
<ul class="nav">
<li class="active">One</li>
<li>Two</li>
<li>Three</li>
</ul>
You can use the below code. A jsFiddle sample is available here.
$('.nav li a').on('click', function (event) {
event.preventDefault(); //Add this only if you want to stop the default link action.
$(this).parent().siblings('li').removeClass('active');
$(this).parent().addClass('active');
});
//The below is to make #link2 active whenever #link1 is clicked.
$('.brand a').on('click', function () {
$('.nav li:first').addClass('active');
$('.nav li:first').siblings('li').removeClass('active');
});
Assuming you should only have one active element on the page, you could do something like this.
$('.nav li a').on('click', function() {
$('.active').removeClass('active');
$(this).parent().addClass('active');
});
If not then you can use closest like so
$('.nav li a').on('click', function() {
$(this).closest('.active').removeClass('active');
$(this).parent().addClass('active');
});
From your comment i think this could work
$('.nav li a').on('click', function() {
$('active').removeClass('active');
var link = $(this).attr('href'), // link1
number = parseInt(link.substr(-1)), // 1
newHref = link.slice(0, link.length - 1) + number++;
$(newHref).addClass('active');
});
so if you click on link1 then link2 will get the active class and click on link2 then link3 will get it and so on....