javascript - Set display of div by using the data-target attribute - Stack Overflow

admin管理员组

文章数量:1402848

Hello I got a question regarding setting the display of a div with the use of the data-target attribute. I have the following HTML code:

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

As can seen above, the div's that contain the class: page-section are initial hidden by CSS using: display:none. Now I managed to create a generic JS code that checks which div should be made visible:

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

The problem with this is that it adds to the second div the class: page-current but the first div also still contains this class.

Can anyone guide me in the right direction how I could solve this is in a generic way so that only one div at the time can contain the class: page-current

I have created a JSFIDDLE of this problem.

Hello I got a question regarding setting the display of a div with the use of the data-target attribute. I have the following HTML code:

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

As can seen above, the div's that contain the class: page-section are initial hidden by CSS using: display:none. Now I managed to create a generic JS code that checks which div should be made visible:

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

The problem with this is that it adds to the second div the class: page-current but the first div also still contains this class.

Can anyone guide me in the right direction how I could solve this is in a generic way so that only one div at the time can contain the class: page-current

I have created a JSFIDDLE of this problem.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jul 27, 2016 at 14:28 Rotan075Rotan075 2,61555 gold badges3737 silver badges5656 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

To do what you require you need to remove the page-current from the current page, and add it to the new element, while removing page-section from the new element and adding it back on to the old.

You can do this by using the toggleClass() method, like this:

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

Working example

本文标签： javascriptSet display of div by using the datatarget attributeStack Overflow