javascript實(shí)現(xiàn)tabs選項卡切換效果(擴(kuò)展版)
2024-05-06 14:19:15
供稿：網(wǎng)友
前段時間寫了個tabs 選項卡切換效果，今天抽空在原有的基礎(chǔ)上進(jìn)行了擴(kuò)展，加入了自動輪播，這樣就變成了類似圖片輪播的效果了。
html 代碼：
代碼如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>js-tabs</title>
<link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/>
<style type="text/css">
a{color:#a0b3d6;}
.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;}
.tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;}
.tabs-nav .select1,.tabs-nav .select2,.tabs-nav .select3,.tabs-nav .select4{background:white;border-bottom:1px solid white;_position:relative;}
.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<h2 class="tabs-nav clearfix">
<a href="javascript:;">首頁</a>
<a href="javascript:;">技術(shù)</a>
<a href="javascript:;">生活</a>
<a href="javascript:;">作品</a>
</h2>
<p class="tabs-content">首頁首頁首頁首頁首頁首頁首頁首頁首頁首頁</p>
<p class="tabs-content">技術(shù)技術(shù)技術(shù)技術(shù)技術(shù)技術(shù)技術(shù)技術(shù)技術(shù)技術(shù)</p>
<p class="tabs-content">生活生活生活生活生活生活生活生活生活生活</p>
<p class="tabs-content">作品作品作品作品作品作品作品作品作品作品</p>
</div>
<br/><br/>
<div class="tabs" id="tabs2">
<h2 class="tabs-nav clearfix">
<a href="javascript:;">11111</a>
<a href="javascript:;">22222</a>
<a href="javascript:;">33333</a>
</h2>
<p class="tabs-content">11111111111111111111111111111111111</p>
<p class="tabs-content ">222222222222222222222222222222222222</p>
<p class="tabs-content ">333333333333333333333333333333333333333</p>
</div>
</body>
</html>
<script type="text/javascript" src="tabs.js"></script>
<script type="text/javascript">
window.onload = function(){
tabs('tabs','click',true,1000);
tabs('tabs2','mouseover');
}
</script>
tabs.js 代碼：
代碼如下:
function tabs(id,trigger,autoplay,time){
var tabsWrap = document.getElementById(id);
var tabsBtn = tabsWrap.getElementsByTagName('h2')[0].getElementsByTagName('a');
var tabsContent = getClass('tabs-content',tabsWrap);
var timer = null;
var current = 0;
show(0);
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsBtn[i].index = i;
if(trigger == 'click'){
tabsBtn[i].onclick = function(){
show(this.index);
}
}else if(trigger == 'mouseover'){
