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

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>

如上所示,包含类的div:page-section由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');
})

工作实例