Question

我似乎无法在SE上找到这个问题。我在列表中有许多链接。单击链接时，将添加活动类。如果单击另一个链接，我希望它处于活动状态，并且上一个活动链接将变为非活动状态。

<li>
    <div class="yearaction year1">
        <a href="#" class="gotoslide inactiveyear" id="year1"></a>
    </div>
    2007
</li>
<li>
    <div class="yearaction year2">
        <a href="#" class="gotoslide inactiveyear" id="year2"></a>
    </div>
    2008
</li>
<li>
    <div class="yearaction year3">
        <a href="#" class="gotoslide inactiveyear" id="year3"></a>
    </div>
    2009
</li>
.
.
.

$(".gotoslide").click(function(){
   $(this).toggleClass("activeyear inactiveyear");
});

此实施不会影响其他链接。如何使此切换正常工作？

Answer 1

你几乎就在那里。这将切换您单击的链接上的类。要在您之前点击的那个上切换它们：

$(".gotoslide").click(function(){
    // previously active
    $(".activeyear").toggleClass("activeyear inactiveyear");
    $(this).toggleClass("activeyear inactiveyear");
});

Answer 2

您必须单独切换它。一个好的解决方法是将data- *附加到每个链接。

<a href="#" class="gotoslide inactiveyear" id="year1" data-year="1"></a>
<a href="#" class="gotoslide inactiveyear" id="year2" data-year="2"></a>

然后

$(".gotoslide").click(function(){
    $(this).toggleClass("activeyear inactiveyear");
    var year = parseInt($(this).data('year')) - 1;
    $('#year' + year).toggleClass("activeyear inactiveyear");
});

Answer 3

这取决于你点击同一目标两次以及如何设置这些类时应该发生的事情。我认为这种思路可能会对你有所帮助：

$(".gotoslide").click(function () {
    $(".gotoslide").removeClass("activeyear"); // removes .activeyear from all items
    $(this).addClass("activeyear"); // add .activeyear to this specific item
});

Answer 4

它不会影响其他链接，因为使用：

$(this)

你只是指.gotoslide类的特定实例（被点击的那个）。

要使用.gotoslide类影响所有其他元素，请参阅：

$('.gotoclass')

Answer 5

您可以尝试这一点，只需使用.toggleClass（）方法切换一个类（活动）。这样，您可以假设非活动状态没有活动类，并使用CSS相应地设置它们的样式。这会检查另一个活动元素（如果有），删除活动类并使其自身处于活动状态。

    $(document).on('click','.gotoslide', function (e) {
        if($('.gotoslide.active').length) {
            $('.gotoslide.active').removeClass('active');
        }
        $(this).toggleClass('active');
    });

Answer 6

您必须先清理其他链接，然后将点击的链接设置为正确的类。

不是切换类，更安全的方法是将类明确地设置为removeClass应该是什么并添加Class。最初将所有$（＆＃39; .activeYear＆＃39;）元素（仅限于一个）设置为无效，然后将点击的链接设置为“非活动日期”

$(".gotoslide").click(function(e){
  e.preventDefault();

  $(".activeyear").removeClass("activeyear").addClass("inactiveyear");

  $(this).toggleClass("activeyear inactiveyear");
});

这里的工作示例：http://jsfiddle.net/hVLML/4/

通过多个链接打开/关闭类

6 个答案: