鼠标指向的栏目显示内容JS，CSS，div怎么设置？

像上图那样，鼠标停在红框里的哪个栏目，下面就换到哪个栏目的内容。JS，CSS，DIV怎么设置？详细一点，做好能做一个样本给我参考。做好有大大的加分。谢谢。... 像上图那样，鼠标停在红框里的哪个栏目，下面就换到哪个栏目的内容。
JS，CSS，DIV怎么设置？详细一点，做好能做一个样本给我参考。
做好有大大的加分。谢谢。展开

 我来答

2个回答

#热议# 应届生在签三方时要注意什么？

枫落于秋
推荐于2016-06-27 · TA获得超过911个赞

知道小有建树答主

回答量：274

采纳率：100%

帮助的人：139万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
#box1{
height:60px;
width:480px;
overflow:hidden;
background:#3F2315;
}
#box1 ul li{
margin:0px;
padding:0px;
height:30px;
color:#B69143;
float: left;
width: 90px;
line-height: 35px;
border-right: 1px solid #1A000D;
list-style-type: none;
text-align:center;
cursor:pointer;
}
#box1 ul li:hover{color:#fff;background:#694628;}
#box2{
margin-top:10px;
clear:both;
height:150px;
width:478px;
border:1px dashed #3F2315;
}
</style>
<script>
function ul1(){
document.getElementById("ul1").style.display="block";
document.getElementById("ul2").style.display="none";
document.getElementById("ul3").style.display="none";
document.getElementById("ul4").style.display="none";
}
function ul2(){
document.getElementById("ul1").style.display="none";
document.getElementById("ul2").style.display="block";
document.getElementById("ul3").style.display="none";
document.getElementById("ul4").style.display="none";
}
function ul3(){
document.getElementById("ul1").style.display="none";
document.getElementById("ul2").style.display="none";
document.getElementById("ul3").style.display="block";
document.getElementById("ul4").style.display="none";
}
function ul4(){
document.getElementById("ul1").style.display="none";
document.getElementById("ul2").style.display="none";
document.getElementById("ul3").style.display="none";
document.getElementById("ul4").style.display="block";
}

</script>
</head>

<body>
<div id="box1">
<ul>
<li onMouseOver="ul1()">最新</li>
<li onMouseOver="ul2()">新闻</li>
<li onMouseOver="ul3()">公告</li>
<li onMouseOver="ul4()">专题</li>
</ul>
</div>
<div id="box2">
<ul id="ul1" style="display:block">
<li>最新</li>
<li>最新</li>
<li>最新</li>
<li>最新</li>
<li>最新</li>
<li>最新</li>
</ul>
<ul id="ul2" style="display:none">
<li>新闻</li>
<li>新闻</li>
<li>新闻</li>
<li>新闻</li>
<li>新闻</li>
</ul>
<ul id="ul3" style="display:none">
<li>公告</li>
<li>公告</li>
<li>公告</li>
<li>公告</li>
<li>公告</li>
<li>公告</li>
</ul>

<ul id="ul4" style="display:none">
<li>专题</li>
<li>专题</li>
<li>专题</li>
<li>专题</li>
<li>专题</li>
<li>专题</li>
</ul>
</div>

</body>
</html>

简单的DEMO，希望能帮到你

已赞过 已踩过<

评论收起

相逢翔风
2014-04-19 · TA获得超过945个赞

知道小有建树答主

回答量：1278

采纳率：50%

帮助的人：779万

我也去答题访问个人页

关注

展开全部

请搜索“选显卡代码”这个关键词有很多相关的介绍的。

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

鼠标指向的栏目显示内容JS，CSS，div怎么设置？

其他类似问题

为你推荐：