Question

您好我有一个关于使用data-target属性设置div显示的问题。我有以下HTML代码：

<div class="page page-current" id="home">
PAGE 1
  <a href="#" class="next" data-target="#about">Go to about</a>
</div>

<div class="page page-section" id="about">
PAGE 2
  <a href="#" class="next" data-target="#portfolio">Go to portfolio</a>
</div>

<div class="page page-section" id="portfolio">
  PAGE 3
</div>

如上所示，包含类：page-section的div最初由CSS使用：display:none隐藏。现在我设法创建了一个通用的JS代码，用于检查哪些div应该可见：

$(".next").click(function(){
    var target = $(this).data("target");
  $(target).addClass("page-current");  
})

这个问题是它在第二个div中添加了类page-current，但第一个div仍然包含这个类。

任何人都可以指导我如何以正确的方式解决这个问题，以便当时只有一个div可以包含该类：page-current

我已经创建了JSFIDDLE这个问题。

Answer 1

要执行您需要的操作，您需要从当前页面中删除page-current，并将其添加到新元素，同时从新元素中删除page-section并将其重新添加到旧元素中。

您可以使用toggleClass()方法执行此操作，如下所示：

$(".next").click(function() {
    var target = $(this).data("target");
    $('.page-current').add(target).toggleClass('page-current page-section');
})

Working example

使用data-target属性设置div的显示

1 个答案: