1．创建一个新的HTML文件百，该文件被称为测试。标题是“CSS实现的鼠标在导航栏上显示的超链接的下划线效果”。
2．在页面上写nav标签，放入三个超链接（首页，第一栏，第二栏），代码如下。
3．运行代码，效果如下。
4．使用backCSS来美化字体大小、颜色和导航字体的排列。守则如下。
5．运行代码，效果如下：可见，经过CSS样式美化，当鼠标经过时，显示蓝色。
6．使用CSS代码，实现鼠标在上面显示下划线效果，代码如下。
7．在浏览器中运行代码以达到预期的效果。
先将要div1的内容隐藏，css代码：#div1{display：none；}
然后将函数 isHidden(oDiv)里面的display设置为显示的：vDiv.style.display = (vDiv.style.display == 'block')?'none':'block'
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{background:#ddd}
#div1{display:none}
</style>
</head>
<body>
<div style="cursor:hand" onclick="isHidden('div1')"><b>调查内容:</b></div>
<div id="div1">隐藏的内容</div>
<script type="text/javascript">
function isHidden(oDiv){
var vDiv = document.getElementById(oDiv)
vDiv.style.display = (vDiv.style.display == 'block')?'none':'block'
}
</script>
</body>
</html>
效果：
点击默认内容后：显示出了隐藏的内容
你好,写了一个,不知道是不是你所说的那样,希望能帮到你,谢谢!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml11-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/htmlcharset=utf-8" />
<style type="text/css">
<!--
#info{
width:200px
height:200px
display:none /*先把 DIV 隐藏*/
background-color:#ccc
}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function (){
// 获取元素
var oBut=document.getElementById("but") // 按钮
var oInfo=document.getElementById("info") // 要显示的DIV
// 给按钮添加 事件
oBut.onclick=function (){
// 如果DIV 已经显示了,则隐藏否则,显示
if(oInfo.style.display=="block"){ // 如果 DIV 已经显示了
oInfo.style.display="none" // 隐藏
}else{ // 否则
oInfo.style.display="block" // 显示
}
}
}
//-->
</script>
</head>
<body>
<input type="button" value="展开" id="but" />
<div id="info">显示信息</div>
</body>
</html>
