今天帶來的是用面向對象實現的tab切換內容是淡入淡出,上面的選項帶過渡動畫,這個例子是在網上看到的他用的jq寫的,= =js的面向對象改進了下,有助於學習。
樣子實現了,不過就是有點醜..喜歡的朋友可以改下樣式
先看下html佈局
<div id="one" class="clearfix">
<ul>
<li class="active"><a href="#">美女1</a></li>
<li><a href="#">美女2</a></li>
<li><a href="#">美女3</a></li>
<li><a href="#">美女4</a></li>
<li><a href="#">美女5</a></li>
</ul>
<div id="div1" class="clearfix">
<div class="div div1 ac2"></div>
<div class="div div2"></div>
<div class="div div3"></div>
<div class="div div4"></div>
<div class="div div5"></div>
</div>
</div>
和一般的 選項卡 一個樣
下面看下css樣式
<style>
*{margin: 0;padding: 0}
ul,li{list-style: none}
a{text-decoration: none}
#one{width: 600px;margin: 50px auto;height: 176px;}
.clearfix:before,.clearfix:after{content: " ";display: table;}
.clearfix:after{clear: both;}
#one ul{width: 180px;background: purple}
#one ul li{line-height:35px;height: 35px;;text-align: center;position: relative;width: 3px;}
#one ul li.active{width: 100%;transition: all .5s;}
#one ul li a{font: 14px/14px "Helvetica Neue";color: white;display: block;line-height: 3;position: relative;width: 180px;font-weight: 700;}
li:nth-of-type(1){background: red;}
li:nth-of-type(2){background: blue;}
li:nth-of-type(3){background: hotpink;}
li:nth-of-type(4){background: fuchsia}
li:nth-of-type(5){background: tomato}
#div1{position: relative;width: 300px;height: 176px;top: -174px;left: 30%;}
#div1 div{opacity: 0;float: left;height: 174px;width: 100%;position: absolute;transition: .5s all}
#div1 div.ac2{opacity: 1;}
.div1{background: url("img2/5.png")no-repeat;background-size: cover}
.div2{background: url("img2/6.png")no-repeat;background-size: cover}
.div3{background: url("img2/7.png")no-repeat;background-size: cover}
.div4{background: url("img2/8.png")no-repeat;background-size: cover}
.div5{background: url("img2/9.png")no-repeat;background-size: cover}
</style>
樣式有些多 用到了 選擇器:nth-of-type 選擇第幾個,還有就是把a標籤變為塊級元素,第一個for循環全部清空，然後利用權重幹掉前面的樣式 不懂的可以看下小編前面的文章有個專門寫選項卡的.
下面是 js代碼
window.onload= function () {
var Box=document.getElementById('one');
var tab=new Tab(Box);
}
function Tab(obj){//傳入參數 就是window.onload裡面的id
var _this=this;//指當前
this.Tab_ul=obj.getElementsByTagName('ul')[0]
this.Tab_ul_li=this.Tab_ul.getElementsByTagName('li');
this.Tab_div=obj.getElementsByTagName('div')[0];
this.Tab_div_div=this.Tab_div.getElementsByTagName('div');//上面都是屬性 獲取元素..
for(var i=0;i<this.Tab_ul_li.length;i++){
this.Tab_ul_li[i].index=i;
this.Tab_ul_li[i].onmouseover= function () {
_this.TabBox(this);//方法
}
}
}
Tab.prototype.TabBox= function (tab) {
for(var i=0;i<this.Tab_ul_li.length;i++){
this.Tab_ul_li[i].className='';//全部情況class
// tab.getElementsByTagName('span')[0].className="active";
this.Tab_div_div[i].style.opacity=0;//透明度全部為0
}
tab.className='active';//給當前點的加lass
this.Tab_div_div[tab.index].style.opacity=1;//通過索引 指向當前的為1，其餘為0
}
</script>
由於是利用的面向對象 所以寫起來比較囉嗦,不過也是很鍛鍊思路的,雖然一般的項目不需要用面向對象,但是要有個思想在裡面，上面註釋都寫了0 0
下面是全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<style>
*{margin: 0;padding: 0}
ul,li{list-style: none}
a{text-decoration: none}
#one{width: 600px;margin: 50px auto;height: 176px;}
.clearfix:before,.clearfix:after{content: " ";display: table;}
.clearfix:after{clear: both;}
#one ul{width: 180px;background: purple}
#one ul li{line-height:35px;height: 35px;;text-align: center;position: relative;width: 3px;}
#one ul li.active{width: 100%;transition: all .5s;}
#one ul li a{font: 14px/14px "Helvetica Neue";color: white;display: block;line-height: 3;position: relative;width: 180px;font-weight: 700;}
li:nth-of-type(1){background: red;}
li:nth-of-type(2){background: blue;}
li:nth-of-type(3){background: hotpink;}
li:nth-of-type(4){background: fuchsia}
li:nth-of-type(5){background: tomato}
#div1{position: relative;width: 300px;height: 176px;top: -174px;left: 30%;}
#div1 div{opacity: 0;float: left;height: 174px;width: 100%;position: absolute;transition: .5s all}
#div1 div.ac2{opacity: 1;}
.div1{background: url("img2/5.png")no-repeat;background-size: cover}
.div2{background: url("img2/6.png")no-repeat;background-size: cover}
.div3{background: url("img2/7.png")no-repeat;background-size: cover}
.div4{background: url("img2/8.png")no-repeat;background-size: cover}
.div5{background: url("img2/9.png")no-repeat;background-size: cover}
</style>
</head>
<body>
<div id="one">
<ul>
<li><a href="#">美女1</a></li>
<li><a href="#">美女2</a></li>
<li><a href="#">美女3</a></li>
<li><a href="#">美女4</a></li>
<li><a href="#">美女5</a></li>
</ul>
<div id="div1">
<div class="div div1 ac2"></div>
<div class="div div2"></div>
<div class="div div3"></div>
<div class="div div4"></div>
<div class="div div5"></div>
</div>
</div>
<script>
window.onload= function () {
var Box=document.getElementById('one');
var tab=new Tab(Box);
}
function Tab(obj){
var index=1;
var _this=this;
this.Tab_ul=obj.getElementsByTagName('ul')[0]
this.Tab_ul_li=this.Tab_ul.getElementsByTagName('li');
this.Tab_div=obj.getElementsByTagName('div')[0];
this.Tab_div_div=this.Tab_div.getElementsByTagName('div')
for(var i=0;i<this.Tab_ul_li.length;i++){
this.Tab_ul_li[i].index=i;
this.Tab_ul_li[i].onmouseover= function () {
_this.TabBox(this);
}
}
}
Tab.prototype.TabBox= function (tab) {
for(var i=0;i<this.Tab_ul_li.length;i++){
this.Tab_ul_li[i].className=''
// tab.getElementsByTagName('span')[0].className="active";
this.Tab_div_div[i].style.opacity=0;
}
tab.className='active';
this.Tab_div_div[tab.index].style.opacity=1;
}
</script>
</body>
</html>
小編還是那些話,覺得自己很牛逼,不屑看的 請管好自己的手還有嘴,你可以不看 沒有請你看.
相關推薦
