切换效果

最新推荐文章于 2021-07-21 14:27:12 发布

yanner_

最新推荐文章于 2021-07-21 14:27:12 发布

阅读量266

点赞数

分类专栏： js动态效果文章标签： html css javascript

本文链接：https://blog.csdn.net/yanner_/article/details/78314097

版权

js动态效果专栏收录该内容

5 篇文章 0 订阅

订阅专栏

说明：当鼠标指到三个任何提示模块（招生，热招，出国），便会在右边div显示对应的新闻模块。
这里写图片描述
html代码：

<!DOCTYPE html>
<html>
<head>
<link href="sohudiv.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
    function change(val,obj){
        if(val=='zs'){
            obj.style.backgroundColor="#FFC12D";
            zs.style.display='block';
            rz.style.display='none';
            cg.style.display='none';
        }else if(val=='rz'){
            obj.style.backgroundColor="#FFC12D";            
            zs.style.display='none';
            cg.style.display='none';            
            rz.style.display='block';           
        }else if(val=='cg'){
            obj.style.backgroundColor="#FFC12D";            
            zs.style.display='none';
            rz.style.display='none';
            cg.style.display='block';           
        }
    }
    function change2(obj){
        obj.style.backgroundColor="silver"; 
    }
</script>
</head>
<body> 
<div class="div1">
<div class="navi">
<ul>
<li onmouseover="change('zs',this)" onmouseout="change2(this)">招生</li>
<li onmouseover="change('rz',this)" onmouseout="change2(this)">热招</li>
<li onmouseover="change('cg',this)" onmouseout="change2(this)">出国</li>
</ul>
</div>
<!--超链接div-->
<div id="zs" class="zs">
<ul>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
<li><a href="#">招生招生招生招生</a></li>
</ul>
</div>
<div id="rz" class="rz">
<ul>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
<li><a href="#">热招热招热招热招</a></li>
</ul>
</div>
<div id="cg" class="cg">
<ul>
<li><a href="#">出国出国出国出国</a></li>
<li><a href="#">出国出国出国出国</a></li>
<li><a href="#">出国出国出国出国</a></li>
<li><a href="#">出国出国出国出国</a></li>
<li><a href="#">出国出国出国出国</a></li>
<li><a href="#">出国出国出国出国</a></li>
<li><a href="#">出国出国出国出国</a></li>
<li><a href="#">出国出国出国出国</a></li>
</ul>
</div>
</div>
</body>
</html>

css代码：

body{
font-size:12px;
}

.div1{
    width:126px;
    height:156px;
    /*background-color:pink;*/
}
.navi{
width:21px;
height:156px;
/*background-color:silver;*/
float:left;
}
.navi ul{
padding:0px;
margin-left:0px;
margin-top:0px;
float:left;
}
.navi li{
list-style-type:none;
margin-top:2px;
width:21px;
height:44px;
background-color:silver;
float:left;
text-align:center; 
padding-top:6px;
}
.zs,.rz,.cg{
width:101px;
heoght:156px;
/*background-color:silver;*/
float:left;
margin-left:4px;
margin-top:5px;
} 
.zs ul,.rz ul,.cg ul{
padding:0px;
margin-left:0px;
margin-top:0px;
float:left;
}
.zs ul li,.rz ul li,.cg ul li{
list-style-type:none;
line-height:18px;
}

.rz{
display:none;
}
.cg{
display:none;   
}

yanner_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
切换效果

说明：当鼠标指到三个任何提示模块（招生，热招，出国），便会在右边div显示对应的新闻模块。 html代码：<!DOCTYPE html><html><head><link href="sohudiv.css" rel="stylesheet" type="text/css"/><script language="javascript" type="text/javascript">
复制链接

扫一扫