原生选项卡切换
下面贴的是利用javascript操作选项卡切换，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge|chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimal-ui">
<meta http-equiv="cache-control" content="no-siteapp"/>
<title>Tabs选项卡</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{
margin: 0;
padding: 0;
}
body {
font-size: 12px;
color: #666;
}
ul, li {
list-style: none;
}
h3{
max-width: 750px;
margin: 50px auto 0;
}
h3 span{
font-size: 12px;
font-weight: normal;;
}
.tabs{
max-width: 750px;
margin: 20px auto 0;
border: 1px solid #ddd;
text-align: center;
background: #f5f5f5;
}
.tabs .hd{
height: 30px;
line-height: 30px;
background: #fefefe; /* Old browsers */
background: -moz-linear-gradient(top, #fefefe 1%, #f1f1f1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#fefefe), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefefe 1%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefefe 1%,#f1f1f1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fefefe 1%,#f1f1f1 100%); /* IE10+ */
background: linear-gradient(to bottom, #fefefe 1%,#f1f1f1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */
border-bottom: 1px solid #ddd;
}
.tabs .hd li{
float: left;
height: 30px;
padding: 0 10px;
margin: 0 0 0 -1px;
cursor: pointer;
}
.tabs .hd li.on,.tabs .hd li.active{
border-left: solid 1px #d5d5d5;
border-right: solid 1px #d5d5d5;
border-top: solid 2px #ff6600;
background: #fff;
height: 30px;
line-height: 27px;
color: #3366cc;
}
.tabs .bd{
padding: 100px 0;
}
.tabs .bd li{
display: none;
}
</style>
</head>
<body>
<h3>这是普通的写法</h3>
<div class="tabs" id="tabs">
<div class="hd" id="hd">
<ul>
<li class="on">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</div>
<div class="bd" id="bd">
<ul>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
</div>
<script type="text/javascript">
// 普通写法
window.onload = (function(){
var tabs = document.getElementById('tabs');
var hd = document.getElementById('hd');
var bd = document.getElementById('bd');
var hdList = hd.getElementsByTagName('li');
var bdList = bd.getElementsByTagName('li');
// 先隐藏bd中的内容
for(var i = 0; i < bdList.length; i++){
bdList[i].style.display = 'none';
}
// 获取当前选中的索引值
var oIndex = 0;
for(var i in hdList){
if(hdList[i].nodeType == 1) {
if (hdList[i].getAttribute("class") == 'on') {
oIndex = i;
}
}
}
// 显示默认显示的内容
bdList[oIndex].style.display = 'block';
// 点击事件
for(var i = 0; i < hdList.length; i++){
hdList[i].index = i;
hdList[i].onclick = function(){
for(var i = 0; i < hdList.length; i++) {
bdList[i].style.display = 'none';
hdList[i].className = '';
}
this.className = 'on';
bdList[this.index].style.display = 'block';
}
}
})()
</script>
<h3>这是面向对象的写法<span>(默认效果)</span></h3>
<div class="tabs" id="tabs2">
<div class="hd">
<ul>
<li class="on">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</div>
<div class="bd">
<ul>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
</div>
<h3><span>(综合效果)</span></h3>
<div class="tabs" id="tabs3">
<div class="hd">
<ul>
<li class="on">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</div>
<div class="bd">
<ul>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var tab2 = new Tab('#tabs2');
};
function Tab(selector, config){
this.config = config || {};
this.selector = document.querySelector(selector);
this.tabBar = this.selector.querySelectorAll(this.config.barItem || '.hd li');
this.tabContent = this.selector.querySelectorAll(this.config.contentItem || '.bd li');
this.len = this.tabBar.length;
this.index = 0;
this.trigger = this.config.trigger || 'click';
this.autoPlay = true;
this.autoPlayTime = this.config.autoPlayTime || 1000;
this.bool = true;
this.derect = true;
this.on = this.config.on || 'on';
// this.delayTime = this.config.delayTime || 2000;
this.init();
};
Tab.prototype.init = function(){
var T = this;
for(var i = 0; i< T.len; i++){
T.tabBar[i].index = i;
T.tabBar[i].addEventListener ? T.tabBar[i].addEventListener(T.trigger, function(e){
T.change(this);
}, false) : attachEvent('on' + T.trigger, function(e){
T.change(this);
}, false) ;
}
T.autoPlay ? T.autoPlayChange() : false;
};
//触发事件切换
Tab.prototype.change = function(obj){
var T = this;
clearInterval(Tab.timer);
for(var i = 0; i < T.len; i++) {
T.tabBar[i].className = '';
T.tabContent[i].style.display = 'none';
}
obj.className = this.on;
T.tabContent[obj.index].style.display = 'block';
T.index = obj.index;
T.config.effect ? T.effect() : false;
T.autoPlay ? T.autoPlayChange() : false;
}
//自动切换
Tab.prototype.autoPlayChange = function(){
var T = this;
Tab.timer = setInterval(changeTab, this.autoPlayTime);
function changeTab(){
if(T.derect){
if(T.index == T.len){
T.derect = false;
return false;
}else{
T.index++;
}
}else{
if(T.index == 1){
T.derect = true;
return false;
}else{
T.index--;
}
}
for(var i = 0; i < T.len; i++) {
T.tabBar[i].className = '';
T.tabContent[i].style.display = 'none';
}
T.tabBar[T.index-1].className = T.on;
T.tabContent[T.index-1].style.display = 'block';
}
};
</script>
<div style="margin-top: 100px;"></div>
</body>
</html>
内容一，是简单的切换写法。
内容二面向对象的写法，创建对象变量。
