Question

我有一个链接列表我想添加css类“active”来显示正在显示的内容，即样式不同

小提琴：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:david.heaney@heaneypartners.com">david.heaney@heaneypartners.com</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:susan.thodey@heaneypartners.com">susan.thodey@heaneypartners.com</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;}

Answer 1

你几乎可以正常工作只需添加下面的行看小提琴

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

单击时添加活动/选定状态以进行链接

1 个答案: