用js实现页面的两个div切换显示但怎么能让首次进入的时候只显示一个div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js实现页面的两个div切换显示但怎么能让首次进入的时候只显示一个div相关的知识，希望对你有一定的参考价值。
<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>
思路：两个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> 参考技术A
有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';
参考技术B 楼上正解，也可以用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。 参考技术C 将div2 的 style里加上 display:none;
比如原来的是
<div id="div2" style="width:500px;">
现在改为
<div id="div2" style="width:500px;display:none;"> 参考技术D 使用鼠标监听事件也可以实现，如下
<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重叠？
如图为一个页面，在DIV1内部添加DIV2DIV3（都指定relative属性），用以在页面上显示两个箭头图片，左箭头为DIV2,右箭头为DIV3，用top和left令他们偏移到相对位置。问题来了，DIV1中的内容被DIV2DIV3挤到下面，移动距离为DIV2DIV3的高度之和。如何能让EIV1的内容不被挤压呢？让他们重叠？该怎么写代码？谢谢！
1css样式 2.新建css规则
3.用dw设置定位absolute，然后就可以拖动了
4.防止重叠要取消掉
参考技术A absolute + z-index 实现重叠不过没明白，是让div1的内容自然流动到 div2 div3后面么
相对定位依然是块元素，后面的内容肯定会流动到其下方,试一下
div2 div3 换成span div1的内容放到span中，共3个span在DIV1中，然后尝试display:inline-block;position:relative;top:0;left:0;这几个属性,我是过可以但不知道是否是你想要的效果本回答被提问者和网友采纳 参考技术B 你试着设置下DIV的宽度高度，你用了浮动没有？你可以在DIV里加代码，比如：<div Position:absolute></div>这是代码是定位，你写了只有然后可以直接拖动DIV的位置，高度会自己设置 参考技术C top设置为负值你试试 参考技术D 加上Position属性，position:absolute
以上是关于用js实现页面的两个div切换显示但怎么能让首次进入的时候只显示一个div的主要内容，如果未能解决你的问题，请参考以下文章
js如何实现：在页面中任意位置点击鼠标，则在该位置显示一个div
一个页面中有多个图片，然后点击每一个图片就会有显示一个带有图片的div出现，这种情况用js怎么做？