DIV 单击 link 时显示和隐藏跳转到下一个

Question

我正在使用 css 和 html 到 show/hide 几个 div。 (http://jsfiddle.net/davidThomas/x8HmQ/2/)

我想用 PREV 和 NEXT "buttons" 扩展这段代码，它们的作用完全一样......所以如果 DIV2 当前可见并点击下一步按钮跳转到 DIV3...

只用CSS+HTML可以吗？

#content > div {
  display: none;
  width: 50%;
  margin: 0 auto;
}
#content > div:target {
  display: block;
}
#content > div a.hide {
  display: block;
  text-align: right;
}

<ul>
  <li><a href="#div1">Div one</a>
  </li>
  <li><a href="#div2">Div two</a>
  </li>
  <li><a href="#div3">Div three</a>
  </li>
  <li><a href="#div4">Div four</a>
  </li>
  <li><a href="#">hide</a>
  </li>
</ul>

<div id="content">
  <div id="div1">This is div one</div>
  <div id="div2">This is div two</div>
  <div id="div3">This is div three</div>
  <div id="div4">This is div four</div>
</div>

Answer 1

我认为你需要 JavaScript 的帮助。因为您需要在点击事件上执行此操作。

http://www.w3schools.com/jquery/jquery_hide_show.asp

Answer 2

ul{
text-align: center;
padding: 0;
margin: 0 auto 20px;
}
li{
display: inline-block;
border: 1px solid green;
padding: 10px;
}
#content{
position: relative;
max-width: 80%;
margin: 0 auto;
}
.prev, .next, .dummy-right, .dummy-left{
box-sizing: border-box;
border: 1px solid blue;
padding: 10px;
position: absolute;
top: 0;
height: 40px;
width: 30px;
}
.prev, .dummy-left{
left: -30px;
}
.next, .dummy-right{
right: -30px;
}
.dummy-right, .dummy-left{
background: #fff;
border-color: #fff;
}
#content > div {
  display: none;
  width: 50%;
  margin: 0 auto;
padding: 20px;
border: 1px solid red;
}
#content > div:target {
  display: block;
}
#content > div a.hide {
  display: block;
  text-align: right;
}

<ul>
  <li><a href="#div1">Div one</a>
  </li>
  <li><a href="#div2">Div two</a>
  </li>
  <li><a href="#div3">Div three</a>
  </li>
  <li><a href="#div4">Div four</a>
  </li>
  <li><a href="#">hide</a>
  </li>
</ul>

<div id="content">

<a href="#div2" class="next">&gt;</a>        
  <div id="div1">
  This is div one

<a href="#div2" class="next">&gt;</a>  
<span class="dummy-left"></span>
</div>
  <div id="div2">This is div two

<a href="#div1" class="prev">&lt;</a>  
<a href="#div3" class="next">&gt;</a>  
</div>
  <div id="div3">This is div three
<a href="#div2" class="prev">&lt;</a>  
<a href="#div4" class="next">&gt;</a>  
</div>
  <div id="div4">This is div four

<a href="#div3" class="prev">&lt;</a>  
<span class="dummy-right"></span>
</div>
</div>

Answer 3

你可以这样试试-

#wrap, ul, li { height: 300px; }
#wrap, li { position: relative; width: 500px; }
#wrap
{
 margin: auto;
 overflow: hidden;
 background: #ccc;
}
ul{
 list-style-type: none;
 position: absolute;
 left: 0px;
 top: 0px;
 width: 2000px;
}

#a1:target ul { left: 0px; }
#a2:target ul { left: -500px; }
#a3:target ul { left: -1000px; }
#a4:target ul { left: -1500px; }

li {
 float: left; 
}
a{
 cursor: pointer;
 display: none;
 height: 64px;
 width: 30px;
 outline-width: 0px;
 position: absolute;
 top: 90px;
 z-index: 2;
 background: red;
}
a[class^="down"] { left: 10px; }
a[class^="up"] { right: 10px; }

:target .up2.default { display: none; }

.up2.default,
#a1:target .up2,
#a2:target .down1,
#a2:target .up3,
#a3:target .down2,
#a3:target .up4,
#a4:target .down3{ display: block; }

<div id="wrap">
 <div id="a1">
 <div id="a2">
 <div id="a3">
 <div id="a4">
 <!-- 1 -->
 <a href="#a2" class="up2 default">2</a>
 <a href="#a2" class="up2">2</a>
 <!-- 2 -->
 <a href="#a1" class="down1">1</a>
 <a href="#a3" class="up3">3</a>
 <!-- 3 -->
 <a href="#a2" class="down2">2</a>
 <a href="#a4" class="up4">4</a>
 <!-- 4 -->
 <a href="#a3" class="down3">3</a>
  <ul>
   <li>
    00000
   </li> 
   <li>
    111111111111
   </li> 
   <li>
    2222222222 
   </li> 
   <li>
    444444
   </li>
  </ul>
 </div> <!-- End #a4 -->
 </div> <!-- End #a3 -->
 </div> <!-- End #a2 -->
 </div> <!-- End #a1 -->
</div>

DIV 单击 link 时显示和隐藏跳转到下一个

DIV show and hide with jumping to next when click on link

html

css

paging

show-hide