style="visibility: none"
document.getElementById("typediv1").style.visibility="hidden"//隐藏
document.getElementById("typediv1").style.visibility="visible"//显示
用JS方法隐藏
<script type="text/javascript">if(document.body.scrollWidth < 700){
document.getElementById('float').style.display = 'none'
}
</script>
2.CSS控制
<html><head>
<meta charset="UTF-8">
<title>标题</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<style type="text/css">
.float{
width:100%
height:auto
}
</style>
</head>
<body>
<div class="float">
<p class="title">机器人哭啥?</p>
<p class="summary">轮机器人为什么哭。轮机器人为什么哭。轮机器人为什么哭。轮机器人为什么哭。轮机器人为什么哭。轮机器人为什么哭。轮机器人为什么哭。</p>
</div>
</body>
</html>
是这样的吗？用了一个CSS3的选择器---范围 *:not('要求不显示的对象')，具体用法建议自己去查，我说的也不是很详细，具体代码如下：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.div {
display:none
border:3px solid red
}
</style>
</head>
<body>
<!-- 实现点击按钮显示一个div,页面上其他的内容全部隐藏。再点击返回按钮，div隐藏，页面上所有的内容再显示出来。-->
<p style="border:2px dashed green" >
<input type="button" name="showandhide" value="按钮" id="button" /><br /><br />
</p>
<article> <!---article是HTML5的一个元素标签-->
<strong>我是其他的内容1</strong>
<hr />
<div class="div">
这里就是div的内容
</div>
<hr />
<span>我是其他的内容2</span>
</article>
</body>
</html>
<script src="TravelCompany/js/jquery-1.8.3.js"></script>
<script>
$(function () {
$("#button").toggle(function () { //toggle是鼠标多次点击事件的方法
$(".div").show() //单击一次按钮
$("article *:not('.div')").hide() //显示div里面的内容，隐藏不是div的元素
//简单的方法就是把所有不是div的元素一个一个的写出来
//$("span").hide()
//$("strong").hide()
}, function () { //再次单击按钮时
$(".div").hide() //隐藏div里面的内容，显示不是div的元素
$("article *:not('.div')").show()
//$("span").show()
//$("strong").show()
})
})
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）