CODEWITHSUNDEEP
javascriptjquery
user2926095
user2926095

Reputation: 5

Change link style when one is clicked

The code below is working fine, but now I need to change the color of the link that was clicked, so users can know which one is selected.

When clicked shoud be class="class_active", and all others shoud be class="class_inactive".

I've tried to add the code below, but it doesn't change the others link's class.

What is wrong?

DEMO

=============================

JS

$(function () {
    $('.dis-content div').hide()
    $('.dis-content .area1').show()
    $(".dis-nav a").click(function (e) {
        //TRIED TO DO THIS;
        //$(this).toggleClass('class_active');
        //$(this).toggleClass('class_inactive');
        e.preventDefault();
        var myClass = $(this).attr("id");
        //  alert(myClass);
        $('.dis-content div').hide();
        $(".dis-content ." + myClass).show();
    });
    $(".dis-nav #show-all").click(function (e) {
        $('.dis-content div').show()
    });
});

=============================

HTML

<div class="dis-nav button">
<a href="#" id="area1" class="class_active">Firefox</a> 
<a href="#" id="area2" class="class_inactive">Safari</a> 
<a href="#" id="area3" class="class_inactive">Chrome</a> 
<a href="#" id="area4" class="class_inactive">IE</a> 
<a href="#" id="show-all" class="class_inactive">Show all</a> 
</div>

<div class="dis-content">
<div class="area1">
<h3>Firefox</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
<div class="area2">
<h3>Safari</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
<div class="area3">
<h3>Chrome</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
<div class="area4">
<h3>IE</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
</div>

Upvotes: 0

Views: 53

Answers (2)

Bram Vanroy
Bram Vanroy

Reputation: 28437

I am guessing this is what you need:

$(this).removeClass('class_inactive').addClass('class_active').siblings().removeClass('class_active').addClass('class_inactive');

Fiddle

Upvotes: 1

Guilherme Sehn
Guilherme Sehn

Reputation: 6787

First, you'll have to remove class_active from all of your links:

$('.dis-nav a').removeClass('class_active').addClass('class_inactive')

Then, you can add the class class_active to your current element:

$(this).removeClass('class_inactive').addClass('class_active');

Does this solve?

Upvotes: 0

Related Questions