普通のtabバーの切り替えと関数パッケージ
2628 ワード
tabバーの切り替えを実現するには、html、css、javascriptの3つの構造が必要です.
構造一:css構造
構造二:html構造
構造3:javascript構造
構造一:css構造
/* , */
*{margin: 0;padding: 0;list-style: none;outline: none;}
/* .tab */
.tab{width: 398px;height: 200px;border: 1px solid #ddd;margin: 100px auto 0;font-family: 'arial';}
.hd{background: #f7f7f7;height: 30px;line-height: 30px;text-align: center;}
.hd ul{width: 400px;margin-left: -1px;}
.hd li{float: left;width: 98px;padding: 0 1px;border-bottom: 1px solid #ddd;}
.hd li.cur{background: #fff;border-bottom-color: transparent;border-left: 1px solid #ddd;border-right: 1px solid #ddd;padding: 0;}
.hd li.cur a{font-size: 14px;font-weight: 600;color: #f40;}
/* a display:block li 1px */
.hd li a{text-decoration: none;color: #666;font-size: 12px;display: block;}
.hd a:hover{text-decoration: none;}
.bd{position: relative;}
.bd li{text-indent: 2em;line-height: 80px;height: 269px;position: absolute;top: 0;left: 0;width: 100%;display: none;}
.bd li.cur{display: block;}
構造二:html構造
<div class="tab" id='tab'>
<div class="hd">
<ul>
<li><a href="javascript:;"> 1</a></li>
<li><a href="javascript:;"> 2</a></li>
<li><a href="javascript:;"> 3</a></li>
<li><a href="javascript:;"> 4</a></li>
</ul>
</div>
<div class="bd">
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
</ul>
</div>
</div>
構造3:javascript構造
tab('tab'); //
// tab
function tab(obj) {
var tab = document.getElementById(obj);
var hdlis = tab.children[0].getElementsByTagName('li');
var bdlis = tab.children[1].getElementsByTagName('li');
var l = hdlis.length;
hdlis[0].className = 'cur';
bdlis[0].className = 'cur';
for(var i = 0; i < l; i ++) {
hdlis[i].index = i;
hdlis[i].onmouseenter = function () {
for(var i = 0; i < l; i ++) {
hdlis[i].className = '';
bdlis[i].className = '';
}
this.className = 'cur';
bdlis[this.index].className = 'cur';
}
}
}