点击键切换Div内容
点击键切换Div内容
提问于 2013-12-05 13:58:39
我有一个div容器，它包含三个div子元素，其中只有第一个子div元素显示在页面加载上。
我只需要在单击按钮上显示后续的子div元素。这意味着当我第一次单击按钮时，它应该显示包含文本"Series Type2“的div，当我单击按钮时，应该显示下一个子元素"Series Type3”。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/div/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>On Demand | Vod Info</title>
</head>
<style>
body {
font-family: Arial;
font-weight: bold;
color: #FFFFFF;
}
#recording-container {
width:100%;
margin:0 auto;
background-color:#8E898F;
width:40%;
margin-top:10%;
height:100px;
}
#type {color: #fff; width: 100%}
#save {color: #fff; width: 100%}
.placeholder{
height:20px;
}
.spacer{
height:20px;
}
.margin-5{
margin-left:5%
}
.highlight {
/*-moz-box-shadow: 0 0 5px 4px red;*/
-webkit-box-shadow: 0 0 0px 0px #ad2eb2;
box-shadow: 0 0 3px 3px #ad2eb2;
border-radius: 3px;
}
.title{
background-color: #ad2eb2;
text-align: center;
}
.series {
height: 36px;
width: 80%;
margin: 0 auto;
overflow: hidden;
}
.seriesType{
float: left;
height: 36px;
line-height: 36px;
margin: 0 5px;
padding: 0 10px;
text-align: center;
width:100%
}
</style>
<body>
<div id="recording-container">
<div id="title" class="title">Record</div>
<div class="placeholder"></div>
<div class="series highlight">
<div class="seriesType" id="series_0">Series Type1</div>
<div class="seriesType" id="series_1">Series Type2</div>
<div class="seriesType" id="series_2">Series Type3</div>
</div>
</div>
<input type="button" onclick="switchdiv()" name="Switch" value="Switch">
<script>
function switchdiv()
{
// Need to write code here
}
</script>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-12-05 14:12:24
我看你没有使用jQuery，所以这个答案也不会。
有几种方法可以做到这一点，这里有一个小提琴：http://jsfiddle.net/SP67E/
我建议使用列表代替，而不是让每个重叠的另一个。每个列表项都将被隐藏，直到需要显示。
但这是你的选择，所以小提琴适合这一点。
小提琴密码：
var seriesId = 0;
var seriesCount = 3;
function switchdiv() {
// Stops last series from being hidden
if (seriesId >= (seriesCount -1)) return;
// Hides each element in turn
document.getElementById("series_" + seriesId).style.display="none"
seriesId++;
}编辑：，如果你想要减少，这里是更新的小提琴：http://jsfiddle.net/SP67E/1/
Stack Overflow用户
发布于 2013-12-05 14:11:52
也许不是最优雅的，但这应该管用。
<script>
var nextSeries = 2;
function switchdiv()
{
$("#series_" + nextSeries).show();
nextSeries += 1;
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20401907
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号