Jquery导航div

Question

我想根据链接的onclick事件显示div。

1. 首次点击 - 隐藏剩余的div（意为div1）和显示div2
2. 第二次点击 - 隐藏剩余的div并显示div3
3. 第三次点击 - 隐藏剩余的div并显示div4
4. 第四次点击 - 隐藏剩余的div并显示div5
5. 第五次点击=隐藏剩余的div并显示div6

在代码div2中，div3，div4，div5，div6显示设置为无。

<div id='div1'> 
  <!-- content -->
</div>
<div id='div2' style="display:none;"> 
  <!-- content -->
</div>
<div id='div3' style="display:none;"> 
  <!-- content -->
</div>
<div id='div4' style="display:none;"> 
  <!-- content -->
</div>
<div id='div5' style="display:none;"> 
  <!-- content -->
</div>
<div id='div6' style="display:none;"> 
  <!-- content -->
</div>
<button id="button">Next</button>

Answer 1

你走了。

修改

如果你想在最后一个div之后转到新页面，只需添加else语句并添加一些属性来发送网址。

$("#button").on('click', function() {
  var visible = $("[id^=div]:visible"),
    number = parseInt(visible.attr('id').substr(3)) + 1,
    nextDiv = $("#div" + number);
  if (nextDiv.length > 0) {
    visible.hide();
    nextDiv.show();
  } else {
    location.href = $(this).attr("data-href");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'>
  Content 1
</div>
<div id='div2' style="display:none;">
  Content 2
</div>
<div id='div3' style="display:none;">
  Content 3
</div>
<div id='div4' style="display:none;">
  Content 4
</div>
<div id='div5' style="display:none;">
  Content 5
</div>
<div id='div6' style="display:none;">
  Content 6
</div>
<button id="button" data-href="https://stackoverflow.com/">Next</button>

Answer 2

＆＃13;

＆＃13;

var counter = 1;
$("#button").bind("click",{},function(e){
   
counter++;
console.log("#div"+counter)
$(".sameType").addClass("displayNone");
   $("#div"+counter).removeClass("displayNone");
   if(counter==6){
   counter=0;
   }
})

＆＃13;

.sameType{
position:relative;
display:inline-block;
background:#ff9900;
height:50px; width:50px; 
margin:0;
}
.displayNone{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1' class='sameType'> 
  <!-- content -->
  1
</div>

<div id='div2' class='sameType displayNone'> 
  <!-- content -->
  2
</div>

<div id='div3' class='sameType displayNone'> 
  <!-- content -->
  3
</div>
<div id='div4' class='sameType displayNone'> 
  <!-- content -->
  4
</div>
<div id='div5' class='sameType displayNone'> 
  <!-- content -->
  5
</div>
<div id='div6' class='sameType displayNone'> 
  <!-- content -->
  6
</div>
<button id="button">Next</button>

＆＃13;

＆＃13;

＆＃13;

您可以使用上述内容。