不知道怎么放图片。。。
<style>
*{
padding:0px;
margin:0px;
}
ul,li{
list-style:none;
}
img{
border:0px;
}
.title{
margin:0 auto;
width:400px;
height:38px;
}
.title li{
float: left;
width:25%;
line-height:38px;
text-align:center;
font-size:18;
font-weight:bold;
letter-spacing:2px;
cursor:pointer;
}
.content{
width: 400px;
height:320px;
margin:0 auto
}
.content .con_item{
display: none;
}
.content .con_tiem img{
width: 160px;
}
.content .active{
display:block;
}
</style>
</head>
<body>
<ul class="title">
<li class="tit_item"οnmοuseοver="tab(0)">陆军</li>
<li class="tit_item"οnmοuseοver="tab(1)">空军</li>
<li class="tit_item"οnmοuseοver="tab(2)">海军</li>
<li class="tit_item"οnmοuseοver="tab(3)">火箭军</li>
</ul>
<!-- 选项卡内容部分-->
<div class="con_item active">
<div class="con_item active">
<img src="./images/lj.jpg" alt="">
</div>
<div class="con_item">
<img src="./images/kj.jpg" alt="">
</div>
<div class="con_item">
<img src="./images/hj.jpg" alt="">
</div>
<div class="con_item">
<img src="./images/rp.jpg" alt="">
</div>
</div>
<script>
/*
滑过标题的时候显示对应内容
1.处理标题对应内容的显示
a.给每一个标题绑定鼠标滑过事件
b.首先将所有内容的标签类名设置为con_item
c.将对应标题的内容添加上active类名
*/
function tab(index){
//获取标题列表的元素
var titList = document.getElementsByClassName('tit_item')
//获取内容列表的元素
var conList = document.getElementsByClassName('con_item')
//将所有内容的标签类名设置为con_item
for(var i=0;i<conList.length;i++){
conList[i].className = 'con_item'
titList[i].style.color='#000'
}
conList[index].className +='active'
totList[index].style.color='green'
//滑过的时候，在前边添加中国2个字
}
</script>
扫一扫
2827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
