站长资源网页制作
通过display或visibility来隐藏html元素
简介有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下： 复制代码代码如下: HTML元素的显示与隐藏控制</div>
<div class="news_infos"><div id="MyContent">有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下： <br><br><u>复制代码</u>代码如下: <br><html> <br><head> <br><title>HTML元素的显示与隐藏控制</title> <br><script type="text/javascript"> <br>function showAndHidden1(){ <br>var div1=document.getElementById("div1"); <br>var div2=document.getElementById("div2"); <br>if(div1.style.display=='block') div1.style.display='none'; <br>else div1.style.display='block'; <br>if(div2.style.display=='block') div2.style.display='none'; <br>else div2.style.display='block'; <br>} <br>function showAndHidden2(){ <br>var div3=document.getElementById("div3"); <br>var div4=document.getElementById("div4"); <br>if(div3.style.visibility=='visible') div3.style.visibility='hidden'; <br>else div3.style.visibility='visible'; <br>if(div4.style.visibility=='visible') div4.style.visibility='hidden'; <br>else div4.style.visibility='visible'; <br>} <br></script> <br></head> <br><body> <br><div>display：元素的位置不被占用</div> <br><div id="div1" style="display:block;">DIV 1</div> <br><div id="div2" style="display:none;">DIV 2</div> <br><input type="button" onclick="showAndHidden1();" value="DIV切换" /> <br><hr> <br><div>visibility：元素的位置仍被占用</div> <br><div id="div3" style="visibility:visible;">DIV 3</div> <br><div id="div4" style="visibility:hidden;">DIV 4</div> <br><input type="button" onclick="showAndHidden2();" value="DIV切换" /> <br></body> <br></html> <br></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="http://m.paidiu.com/show/1/67542.html" title="设置disabled属性后台读不到数据如何让select支持readonly">设置disabled属性后台读不到数据如何让select支持readonly</a></p>
<p>下一篇：<a href="http://m.paidiu.com/show/1/67544.html" title="HTML标签上标sup、下标sub应用介绍">HTML标签上标sup、下标sub应用介绍</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/show/1/608988.html" title="群星2001-芭啦芭啦樱之花电影原声带AVCD[">群星2001-芭啦芭啦樱之花电影原声带AVCD[</a></li>
<li><a href="/show/1/608987.html" title="群星2001-重回摇滚舞台·纪念薛岳逝世十周">群星2001-重回摇滚舞台·纪念薛岳逝世十周</a></li>
<li><a href="/show/1/608986.html" title="群星2001-林夕音乐词典2CD[香港首版][WAV">群星2001-林夕音乐词典2CD[香港首版][WAV</a></li>
<li><a href="/show/1/608985.html" title="《101系列 金声回忆 101 蔡琴》[WAV+CUE]">《101系列 金声回忆 101 蔡琴》[WAV+CUE]</a></li>
<li><a href="/show/1/608984.html" title="《101系列：True Legend 101 陈百强》[WAV">《101系列：True Legend 101 陈百强》[WAV</a></li>
<li><a href="/show/1/608983.html" title="《陈百强28CD合集》1979-1993 低速原抓[C">《陈百强28CD合集》1979-1993 低速原抓[C</a></li>
<li><a href="/show/1/608982.html" title="【蓝调摇滚】JohnHaydock-2024-StraightL">【蓝调摇滚】JohnHaydock-2024-StraightL</a></li>
<li><a href="/show/1/608981.html" title="感受独特魅力《百万双钢琴演奏曲》5CD[WA">感受独特魅力《百万双钢琴演奏曲》5CD[WA</a></li>
<li><a href="/show/1/608980.html" title="【古典音乐】安娜·莫福《咏叹调》美国版S">【古典音乐】安娜·莫福《咏叹调》美国版S</a></li>
<li><a href="/show/1/608979.html" title="《法拉利·汽车专用试音碟》名贵音响顶级黑">《法拉利·汽车专用试音碟》名贵音响顶级黑</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">标签云</h2><ul><a href="/search.asp?key=1080P高清&m=1">1080P高清<span>(5)</span></a><a href="/search.asp?key=高清电影&m=1">高清电影<span>(5)</span></a><a href="/search.asp?key=百度云盘&m=1">百度云盘<span>(5)</span></a><a href="/search.asp?key=网盘下载&m=1">网盘下载<span>(4)</span></a><a href="/search.asp?key=破解软件&m=1">破解软件<span>(4)</span></a><a href="/search.asp?key=绿色软件&m=1">绿色软件<span>(4)</span></a><a href="/search.asp?key=磁力链接&m=1">磁力链接<span>(3)</span></a><a href="/search.asp?key=强度天梯&m=1">强度天梯<span>(3)</span></a><a href="/search.asp?key=福利资源&m=1">福利资源<span>(2)</span></a><a href="/search.asp?key=王者荣耀&m=1">王者荣耀<span>(2)</span></a><a href="/search.asp?key=黑钻活动&m=1">黑钻活动<span>(2)</span></a><a href="/search.asp?key=WPS会员&m=1">WPS会员<span>(2)</span></a><a href="/search.asp?key=刷图排行&m=1">刷图排行<span>(1)</span></a><a href="/search.asp?key=网盘限速&m=1">网盘限速<span>(1)</span></a><a href="/search.asp?key=鬼灭之刃&m=1">鬼灭之刃<span>(1)</span></a><a href="/search.asp?key=免费韩国漫画&m=1">免费韩国漫画<span>(1)</span></a><a href="/search.asp?key=宫本重做&m=1">宫本重做<span>(1)</span></a><a href="/search.asp?key=免费动漫&m=1">免费动漫<span>(1)</span></a></ul></div>
</div>
</article>
<footer>
<p>Design by <a href="http://m.paidiu.com">黑松山资源网</a> <a href="/">http://m.paidiu.com</a></p>
</footer>
<script src="/images/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>