CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Steve
Steve

Reputation: 8293

Add active/selected state to link when click

I have a list of links i would like to add css class of "active" to, to show what is being displayed ie styled different

Fiddle:http://jsfiddle.net/zangief007/rj8g0yh4/7/

HTML:
<ul class="filter-desk" id="selectMe-desk">
  <li class="category-1"><a class="active" href="#" data-page="category-1">Partners</a></li>
  <li class="category-2"><a class="" href="#" data-page="category-2">Consultants</a></li>
  <li class="category-3"><a class="" href="#" data-page="category-3">PA's</a></li>
</ul>

<ul class="category-1 group">    
    <li class="name">JOHN Smithe QC</li>
    <li class="call">DDI <span>09 333 45335</span></li>
    <li class="call">MOB <span>027 545 69873</span></li>
    <li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<ul class="category-3 group">
    <li class="name">Barry White</li>
    <li class="call">DDI <span>021 487 5896</span></li>
    <li class="call">MOB <span>024 387 9854</span></li>
    <li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<ul class="category-2 group">
    <li class="name">Peter Pan</li>
    <li class="call">DDI <span>231234</span></li>
    <li class="call">MOB <span>234234</span></li>
    <li><a href="mailto:23423423423">23423423423</a></li>
</ul>

JS:

$(function() {
var curPage = "";

$('.group').hide();
$('.category-1').show();
$("#selectMe-desk li a").click(function() {
    var $a = $(this);
    curPage = $a.data("page");
    $(".group").hide().filter("."+curPage).show();
});

});

CSS

.active{
color:red;}

Upvotes: 0

Views: 637

Answers (1)

MartinWebb
MartinWebb

Reputation: 2008

You have it almost working just add the lines in below see the fiddle

http://jsfiddle.net/rj8g0yh4/9/

$(function() {
var curPage = "";

$('.group').hide();
$('.category-1').show();
$("#selectMe-desk li a").click(function(e) {
   var $a = $(this);

   // hide currently active

   $(".filter-desk .active").removeClass("active");

   // make this one active

   $a.addClass("active");

   curPage = $a.data("page");
   $(".group").hide().filter("."+curPage).show();
   });
});

Upvotes: 1

Related Questions