用js实现页面的两个div切换显示但怎么能让首次进入的时候只显示一个div
<SCRIPTLANGUAGE="JavaScript"><!--functionshowInfo(boolIsFlag){if(boolIsFlag){document...
<SCRIPT LANGUAGE="JavaScript">
<!--
function showInfo(boolIsFlag)
{
if(boolIsFlag)
{
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
}
else
{
document.getElementById("div2").style.display="block";
document.getElementById("div1").style.display="none";
}
}
//-->
</SCRIPT> 展开
<!--
function showInfo(boolIsFlag)
{
if(boolIsFlag)
{
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
}
else
{
document.getElementById("div2").style.display="block";
document.getElementById("div1").style.display="none";
}
}
//-->
</SCRIPT> 展开
5个回答
展开全部
思路：两个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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
有2种方法，我们假设页面有2个要切换的div，id分别为div1和div2
第一种方式
给首次进入页面，且无需显示的div加上css属性，display:none
例如，我们只想显示div1，那么我们就div2加上style="display:none"
第二种方式
待页面加载完成后，使用js来隐藏div
window.onload = function(){
document.getElementById("div2").style.display = 'none';
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼上正解，也可以用js，例如你上面的那个代码，可以改写：
<SCRIPT LANGUAGE="JavaScript">
<!--
document.getElementById("div1").style.display="none";//这里是你要进入页面隐藏的div
function showInfo(boolIsFlag)
{
if(boolIsFlag)
{
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
}
else
{
document.getElementById("div2").style.display="block";
document.getElementById("div1").style.display="none";
}
}
//-->
</SCRIPT>
提醒你一下，这个代码最好是放在页面最下面，当加载完页面后触发这个js。
<SCRIPT LANGUAGE="JavaScript">
<!--
document.getElementById("div1").style.display="none";//这里是你要进入页面隐藏的div
function showInfo(boolIsFlag)
{
if(boolIsFlag)
{
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
}
else
{
document.getElementById("div2").style.display="block";
document.getElementById("div1").style.display="none";
}
}
//-->
</SCRIPT>
提醒你一下，这个代码最好是放在页面最下面，当加载完页面后触发这个js。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
将div2 的 style里加上 display:none;
比如原来的是
<div id="div2" style="width:500px;">
现在改为
<div id="div2" style="width:500px;display:none;">
比如原来的是
<div id="div2" style="width:500px;">
现在改为
<div id="div2" style="width:500px;display:none;">
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
使用鼠标监听事件也可以实现，如下
<div id="allQuDao">
div1
</div>
<div id="allQuDao2" style="display: none">
div2
</div>
Js如下：
$("#allQuDao").mouseover(function(){
$("#allQuDao2").show();
$("#allQuDao").hide();
});
$("#allQuDao2").mouseleave(function(){
$("#allQuDao2").hide();
$("#allQuDao").show();
});
希望可以帮助到你
<div id="allQuDao">
div1
</div>
<div id="allQuDao2" style="display: none">
div2
</div>
Js如下：
$("#allQuDao").mouseover(function(){
$("#allQuDao2").show();
$("#allQuDao").hide();
});
$("#allQuDao2").mouseleave(function(){
$("#allQuDao2").hide();
$("#allQuDao").show();
});
希望可以帮助到你
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
