单击链接时DIV显示和隐藏并跳转到下一个

Question

我正在使用 css 和 html 来显示/隐藏一些 div。 (http://jsfiddle.net/davidThomas/x8HmQ/2/)

我想用 PREV 和 NEXT “按钮”扩展这段代码，它们的功能完全一样......所以如果 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

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 2

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

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

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>