Develop Reference

Toggle classes between two different elements

I want to toggle between two classes on two anchor tags. When I click on the non-bold link, I want it to go bold, and then the other go to normal. However I don't really know how to go about it.
I've tried a few approaches:
$(".link").click(function(e) {
e.preventDefault();
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2<a>
</div>
Here, I add and remove based on the target and check if that class is present but it doesn't handle the other non-clicked anchor - I need to click that to remove the bolding when it needs to happen automatically.
I then mess around toggleClass():
$(".link").click(function(e) {
$(this).toggleClass("selected");
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2</a>
</div>
Which is definitely a step closer but I don't understand how to establish a relationship with toggleClass() and more than one element.
Am I going about this the right way or is there something better?

How about this. You can use siblings() method.
$(".link").click(function(e) {
$(this).toggleClass("selected");
$(this).siblings('a').toggleClass('selected');
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2</a>
</div>

The accepted answer is the right one, but something that should be added:
$(".link").click(function(e) {
var isSelected = $(this).hasClass("selected");
e.preventDefault();
if (!isSelected) {
$(this).toggleClass("selected");
$(this).siblings('a').toggleClass('selected');
}
});
Essentially, only perform the toggle action if what you're clicking on is NOT the selected element.

A simpler solution
$(".link").click(function(e) {
e.preventDefault();
$(".link").removeClass("selected");
$(this).addClass("selected");
});
Remove selected class from all .link then add it to the clicked element. This will work for more than 2 links and it is simpler. There is no need to check for selected class or get siblings.

Change span on click Jquery

I've this code
$('a').click(function() {
$('a span').first().addClass('hide');
$('a span:nth-child(2)').removeClass('hide');
$('a span:nth-child(2)').addClass('display');
});
.hide {
display:none;
}
.display {
display:block;
}
<a href="#">
<span>Hello</span>
<br>
<span class="hide">World</span>
</a>
When I click on the link I want the first span hide and the 2nd span appears.
I want to do it multiple times (click on this link multiples times and have the same result).
I try to do it with this Jquery code

I would just toggle the classes
and you have to prevent the default on the link so it doesn't try to leave the page.
$('a').click(function(e) {
e.preventDefault();
$('a span').toggleClass('hide show');
});
here is a work demo

I would do something like this. Loop through the children of the a and swap their classes. Doing this method allows you to do other things as well as just toggle the class like adding text/css attributes to the span's.
$('a').click(function() {
$(this).children().each(function(index, element)
{
if ($(this).hasClass('hide'))
{
$(this).removeClass('hide');
$(this).addClass('display');
}
else
{
$(this).removeClass('display');
$(this).addClass('hide');
}
});
});
Here is a JS Fiddle of the code above

This should do what you are looking for:
HTML:
<a class='hide-clicker' href="#">
<span>Hello</span>
<span class="hide">World</span>
</a>
jquery:
$("a.hide-clicker").click(function(e) {
e.preventDefault();
$(this).find('span').toggleClass('hide');
});
CSS:
.hide {
display:none;
}

jquery selected link activate but different div

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');
})

jquery make action when link menu item is clicked

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'));
});
});

remove class of group of links once another link is clicked

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/