选项卡功能
<style>
*{
margin:0;
padding: 0;
}
ul,ol{
list-style: none;
}
/*整个容器盒子大小 相对定位*/
.side-box{
width: 230px;
position: relative;
margin: 0 auto;
}
/*头部*/
.side-box-hd{
position: relative;
height: 18px;
margin-bottom: 10px;
padding: 11px 0;
}
/*头部标题*/
.side-box-tit{
padding-left: 10px;
border-left: 3px solid #389f0c;
font: 18px/1 '\5fae\8f6f\96c5\9ed1';
color: #389f0c;
}
/*选项卡盒子 绝对定位到头部区域去*/
.tabs{
position: absolute;
right: 0;
top: 9px;
height: 22px;
}
/*选项卡里面的内容*/
.tabitem{
float: left;
height: 22px;
padding: 0 8px;
line-height: 22px;
text-align: center;
color: #389f0c;
font-weight: bold;
}
/*成绩分数*/
.grade{
position: absolute;
top: 5px;
right: 0;
height: 16px;
padding-left: 20px;
line-height: 16px;
color: #ff6d00;
background: url(http://p7.qhimg.com/t017bb00fb17c182fe8.png) 0 0 no-repeat;
}
.mod-olist li {
overflow: hidden;
border-bottom: 1px dotted #eaeaea;
width: 230px;
height: 26px;
margin: 0;
padding: 0;
line-height: 26px;
}
/*数字标示*/
.mod-olist .index {
position: absolute;
left: 0;
top: 6px;
width: 17px;
height: 14px;
text-align: center;
line-height: 14px;
color: #fff;
background: #aaa;
}
/*第一个盒子里面显示的其他内容-----------*/
.mod-olist .img_show .index{
top:0
}
/*前三的颜色*/
.mod-olist .top-three .index{
background: #3eaf0e;
}
.mod-olist .img_show{
position: relative;
width: 153px;
height: 85px;
height: auto;
padding-left: 27px;
padding-right: 50px;
border-bottom: 0;
}
/*图片容器*/
.mod-olist .img_txt_box .pic {
float: left;
width: 60px;
height: 80px;
margin: 0 10px 0 0;
}
.img_txt_box .pic a {
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
.img_txt_box .pic a img{
width: 60px;
height: 80px;
border: none;
outline: none;
}
.mod-olist .img_txt_box .cont {
overflow: hidden;
padding-top: 4px;
text-align: left;
line-height: 2;
color: #888;
}
.mod-olist .img_txt_box .cont h4 {
font-size: 12px;
overflow: hidden;
height: 21px;
font-weight: 400;
}
.img_txt_box .cont p {
overflow: hidden;
height: 18px;
font-size: 12px;
}
/*-----------------------------*/
.mod-olist .red{
background-position: 0 -40px;
}
.mod-olist .yellow{
background-position: 0 -20px;
}
.mod-olist .green {
background-position: 0 0;
}
/*电影电视名字内容*/
.mod-olist .name {
position: relative;
zoom: 1;
z-index: 1;
display: block;
overflow: hidden;
height: 26px;
line-height: 26px;
padding-left: 27px;
padding-right: 50px;
}
.mod-olist .name:hover {
background: #f7f7f7;
}
.mod-olist a:link {
color: #444;
}
.mod-olist a:hover {
color: #389f0c;
}
.side-box-bd a{
text-decoration: none;
}
.clearfix:after{
display:block;
clear:both;
content:".";
visibility:hidden;
height:0
}
.clearfix{zoom:1}
.active{
background-color: #389f0c;
color: #ffffff;
border-radius: 5px;
box-shadow:0 0 10px rgba(51, 197, 105, 0.60);
}
</style>
<div class="side-box">
<div class="side-box-hd">
<h3 class="side-box-tit">特色榜</h3>
</div>
<div class="side-box-bd">
<div class="tabs" id="tabs_nav">
<a href="javascript:void(0)" class="tabitem active">
<i>大陆</i>
</a>
<a href="javascript:void(0)" class="tabitem">
<i>港台</i>
</a>
<a href="javascript:void(0)" class="tabitem">
<i>海外</i>
</a>
</div>
<div class="le-views" id="tabs_content">
<div class="viewitem" id="viewitem_0" style="display:block;">
<ol class="mod-olist clearfix">
<li class="top-three img_show clearfix">
<span class="index">1</span>
<div class="img_txt_box">
<div class="pic">
<a href="" title="特殊身份111" target="_blank">
<img src="http://p1.qhimg.com/t01c5d6faecb9a2ef03.jpg" alt="特殊身份111">
</a>
</div>
<div class="cont">
<h4 class="title">
<a href="" class="title" title="特殊身份1" target="_blank">特殊身份1</a>
</h4>
<p>宇宙最能打1</p>
<p>主演：甄子丹</p>
</div>
</div>
<span class="grade green">5.8分</span>
</li>
<li class="top-three clearfix">
<a href="" title="不二神探" class="name">
<span class="index">2</span>
不二神探1
<span class="grade yellow">5.2分</span>
</a>
</li>
<li class="top-three clearfix">
<a href="" title="" class="name">
<span class="index">3</span>
非常幸运1
<span class="grade red">4.5分</span>
</a>
</li>
<li class="clearfix">
<a href="" title="" class="name">
<span class="index">4</span>
非常完美1
<span class="grade red">4.3分</span>
</a>
</li>
<li class="clearfix">
<a href="" title="" class="name">
<span class="index">5</span>
哈利波特1
<span class="grade green">4.7分</span>
</a>
</li>
</ol>
</div>
<div class="viewitem" id="viewitem_1" style="display:none;">
<ol class="mod-olist clearfix">
<li class="top-three img_show clearfix">
<span class="index">1</span>
<div class="img_txt_box">
<div class="pic">
<a href="" title="特殊身份222" target="_blank">
<img src="http://p1.qhimg.com/t01c5d6faecb9a2ef03.jpg" alt="特殊身份222">
</a>
</div>
<div class="cont">
<h4 class="title">
<a href="" class="title" title="特殊身份2" target="_blank">特殊身份2</a>
</h4>
<p>宇宙最能打2</p>
<p>主演：甄子丹</p>
</div>
</div>
<span class="grade green">5.8分</span>
</li>
<li class="top-three clearfix">
<a href="" title="不二神探" class="name">
<span class="index">2</span>
不二神探2
<span class="grade yellow">5.2分</span>
</a>
</li>
<li class="top-three clearfix">
<a href="" title="" class="name">
<span class="index">3</span>
非常幸运2
<span class="grade red">4.5分</span>
</a>
</li>
<li class="clearfix">
<a href="" title="" class="name">
<span class="index">4</span>
非常完美2
<span class="grade red">4.3分</span>
</a>
</li>
<li class="clearfix">
<a href="" title="" class="name">
<span class="index">5</span>
哈利波特2
<span class="grade green">4.7分</span>
</a>
</li>
</ol>
</div>
<div class="viewitem" id="viewitem_2" style="display:none;">
<ol class="mod-olist clearfix">
<li class="top-three img_show clearfix">
<span class="index">1</span>
<div class="img_txt_box">
<div class="pic">
<a href="" title="特殊身份333" target="_blank">
<img src="http://p1.qhimg.com/t01c5d6faecb9a2ef03.jpg" alt="特殊身份333">
</a>
</div>
<div class="cont">
<h4 class="title">
<a href="" class="title" title="特殊身份3" target="_blank">特殊身份3</a>
</h4>
<p>宇宙最能打3</p>
<p>主演：甄子丹</p>
</div>
</div>
<span class="grade green">5.8分</span>
</li>
<li class="top-three clearfix">
<a href="" title="不二神探" class="name">
<span class="index">2</span>
不二神探3
<span class="grade yellow">5.2分</span>
</a>
</li>
<li class="top-three clearfix">
<a href="" title="" class="name">
<span class="index">3</span>
非常幸运3
<span class="grade red">4.5分</span>
</a>
</li>
<li class="clearfix">
<a href="" title="" class="name">
<span class="index">4</span>
非常完美3
<span class="grade red">4.3分</span>
</a>
</li>
<li class="clearfix">
<a href="" title="" class="name">
<span class="index">5</span>
哈利波特3
<span class="grade green">4.7分</span>
</a>
</li>
</ol>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//得到选项卡对象集合
var otbs_nav_box = document.getElementById("tabs_nav");
var otabs_array = otbs_nav_box.getElementsByTagName("a");
var len = otabs_array.length;
for(var i = 0;i<len;i++){
//将当前点击的下标索引放在otabs_array[i].index 属性中
otabs_array[i].index=i;
//给每个选项卡按钮添加点击事件
otabs_array[i].onclick= function(){
//先清除上一个选项卡的样式，所有的选项卡样式重新设置
for(var j = 0;j<len;j++){
otabs_array[j].setAttribute('class','tabitem');
}
//给当前点击的选项卡添加样式
otabs_array[this.index].setAttribute('class','tabitem active');
//得到选项卡对应的内容集合
var otabs_content_box = document.getElementById("tabs_content");
//ie 不支持getElementsByClassName 郁闷
// var otabs_view_array = otabs_content_box.getElementsByClassName("viewitem");
var otabs_view_array = [];
for(var k = 0 ;k<len;k++){
var tempobj = document.getElementById("viewitem_"+k);
otabs_view_array.push(tempobj);
otabs_view_array[k].style.display='none';
}
otabs_view_array[this.index].style.display='block';
}
}
</script>
php资料
