js滚动

最新推荐文章于 2022-06-27 17:53:44 发布

会飞的小祥

最新推荐文章于 2022-06-27 17:53:44 发布

阅读量309

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_27289001/article/details/50283079

<!DOCTYPE html>
<html>
<head>
<title>滑动测试</title>
<meta charset="UTF-8">
<style type="text/css">
.main-midden-left{
width:805px;
height: 260px;
border:2px solid red;
float: left;
}

#tit{
width: 805px;
height: 40px;
border: 1px solid black;
float: left;
}
#tit ul{

}
#tit ul li{
height: 34px;
line-height:34px;
display:block;
background-color:#blue;
border-left: none;
float:left;
text-align: center;
color:#940606;
font-weight: bold;
font-size: 0.9em;
margin-right: 30px;
}
#tab-main{
width:805px;
height: 200px;
border: 2px solid green;
float: left;
}

</style>
</head>
<body>
<div class="main-midden-left">
<div id="tit">
<ul>
<li id="tit-name1" style="background-color:red" onmouseover="showdiv('1');">校园文化 </li>
<li id="tit-name2" onmouseover="showdiv('2');">科技创新 </li>
<li id="tit-name3" onmouseover="showdiv('3');">社会实践 </li>
</ul>
</div>
<div id="tab-main" style="height: 70%">
<div id="banner_son1" style="display:block"><div>a</div><div>1</div><div>first</div></div>
<div id="banner_son2" style="display:none"><div>b</div><div>2</div><div>two</div></div>
<div id="banner_son3" style="display:none"><div>c</div><div>3</div><div>their</div></div>
</div>
</div>
<script type="text/javascript">
function showdiv(thisdiv){
var varkeys="tit-name";
var varvalues="banner_son";
for(var i=1;i <=3;i++){
document.getElementById(varvalues+i).style.display='none';
document.getElementById(varkeys+i).style.backgroundColor='white';
}
/*for(var j=1;j <=3;j++){
document.getElementById(varkeys+j).style.backgroundColor='white';
}*/

document.getElementById(varkeys+thisdiv).style.backgroundColor='red';
document.getElementById(varvalues+thisdiv).style.display='block';
}
</script>

</body>

</html>