JS切换div的问题
看到您之前回答用js实现页面的两个div切换显示但怎么能让首次进入的时候只显示一个div这个问题用以下代码。<body><inputtype="button"id="bt...
看到您之前回答 用js实现页面的两个div切换显示但怎么能让首次进入的时候只显示一个div 这个问题用以下代码。
<body >
<input type="button" id="btn" value="click me" />
<div style ="width:100px; height:100px; background:red; display:block; " id ="div1"> This is a test ! </div>
<div style ="width:100px; height:100px; background:yellow; display:none;" id ="div2"> This is a test !</div>
</body>
<script>
var oBtn = document.getElementById('btn');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oBtn.onclick = function(){
if(oDiv1.style.display == 'block'){
oDiv1.style.display = 'none';
oDiv2.style.display = 'block';
}else{
oDiv2.style.display = 'none';
oDiv1.style.display = 'block';
}
};
</script>
我的问题是有div3、div4js代码该怎么加？ 展开
<body >
<input type="button" id="btn" value="click me" />
<div style ="width:100px; height:100px; background:red; display:block; " id ="div1"> This is a test ! </div>
<div style ="width:100px; height:100px; background:yellow; display:none;" id ="div2"> This is a test !</div>
</body>
<script>
var oBtn = document.getElementById('btn');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oBtn.onclick = function(){
if(oDiv1.style.display == 'block'){
oDiv1.style.display = 'none';
oDiv2.style.display = 'block';
}else{
oDiv2.style.display = 'none';
oDiv1.style.display = 'block';
}
};
</script>
我的问题是有div3、div4js代码该怎么加？ 展开
2个回答
展开全部
要显示的用block.其他none,切换div,哪个显示哪个用block其他none
追问
这个代码的效果是打开页面显示div1，点击按钮之后显示div2隐藏div1，现在我要加一个div3，就是点击按钮之后显示div3，隐藏div1和div2，请问这js代码该怎么加？
追答
<div class="allDiv">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
$(".allDiv div").click(function(){
$(this).show().siblings().hide()
})
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
就是说换成4个div的tab切换吗？
追问
这个代码的效果是打开页面显示div1，点击按钮之后显示div2隐藏div1，现在我要加一个div3，就是点击按钮之后显示div3，隐藏div1和div2，请问这js代码该怎么加？
追答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{border: 1px solid red;width: 100px;height: 100px;display: none;font-size: 30px;}
.show{display: block;}
</style>
</head>
<body>
<div class="show">11111</div>
<div>22222</div>
<div>33333</div>
<div>44444</div>
<button id="btn">点击切换</button>
</body>
<script type="text/javascript">
var divs=document.getElementsByTagName('div');
var btn=document.getElementById('btn');
var a=0,b=divs.length;
btn.onclick=function(){
a++;
if(a>3){
a=0;
}
for (var i=0;i<b;i++) {
divs[i].className="";
}
divs[a].className="show";
}
</script>
</html>
JavaScript原生代码
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
