JS

Question

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

点击时应该是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>

Answer 1

我猜这就是你需要的：

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

<强> Fiddle

Answer 2

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

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

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

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

这解决了吗？

单击一个时更改链接样式

JS

HTML

2 个答案: