0

下面的代码工作正常，但现在我需要更改被点击链接的颜色，以便用户知道选择了哪一个。

单击时应为 class="class_active"，其他所有应为 class="class_inactive"。

我尝试添加下面的代码，但它不会更改其他链接的类。

怎么了？

演示

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

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>
4

2 回答 2

1

我猜这就是你需要的：

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

小提琴

于 2013-10-28T19:22:10.433 回答
0

首先，您必须class_active从所有链接中删除：

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

然后，您可以将类添加class_active到当前元素：

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

这解决了吗？

于 2013-10-28T19:21:08.133 回答