幾種tab切換詳解
更新時(shí)間：2017年02月03日 14:17:42 作者：一者乎
本文主要分享了幾種tab切換的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
1.鼠標(biāo)移入移出切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切換</title>
<style type="text/css">
* {padding: 0;margin: 0;}
li {list-style: none;}
.wrapper {
margin: 0 auto;
width: 100%;
max-width: 1140px;
}
.tabbox {
margin: 40px auto;
width: 400px;
height: 200px;
border: 1px solid #f70;
overflow: hidden;
}
.tabbox .tab-tit{
position: relative;
height: 40px;
}
ul {
position: absolute;
left: -1px;
width: 401px;
height: 40px;
line-height: 40px;
background-color: #eaeaea;
}
ul li {
float: left;
border-left: 1px solid #f70;
border-bottom: 1px solid #f70;
text-align: center;
width: 99px;
height: 40px;
overflow: hidden;
}
.clear {clear: both;}
.select {
padding-right: 1px;
border-bottom: none;
background-color: #fff;
}
a:link, a:visited {
font-size: 16px;
font-weight: bold;
color: #888;
text-decoration: none;
}
.select a {
color: #333;
}
a:hover, a:active {
color: #f20;
font-weight: bold;
}
.tab-txt {
width: 400px;
padding: 40px;
overflow: hidden;
}
.demo {display: none;}
.tab-txt p {
line-height: 40px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="tabBox" class="tabbox">
<div id="tabTit" class="tab-tit">
<ul>
<li class="select"><a href="javascript:;">女槍</a></li>
<li><a href="javascript:;">提莫</a></li>
<li><a href="javascript:;">蓋倫</a></li>
<li><a href="javascript:;">劍圣</a></li>
</ul>
</div>
<!-- <div class="clear"></div> -->
<div id="tabTxt" class="tab-txt">
<div class="demo" style="display: block;">
<p>我有兩把槍，一把叫射，另一把叫，啊~</p>
<p>你有一雙迷人的眼睛，我非常喜歡！</p>
</div>
<div class="demo">
<p>我去前面探探路</p>
<p>提莫隊(duì)長(zhǎng)正在待命！</p>
</div>
<div class="demo">
<p>放馬過來吧，你會(huì)死的很光榮的！</p>
<p>快點(diǎn)兒結(jié)束吧，我頭有點(diǎn)兒轉(zhuǎn)暈了……</p>
</div>
<div class="demo">
<p>我的劍就是你的劍。</p>
<p>眼睛多，看東西才會(huì)更加清楚</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
var tits = $("tabTit").getElementsByTagName("li");
var txts = $("tabTxt").getElementsByClassName("demo");
if(tits.length != txts.length) {return;}
for(var i=0,l=tits.length; i<l; i++) {
tits[i].id = i;
tits[i].onmouseover = function() {
for(var j=0; j<l; j++) {
tits[j].className = "";
txts[j].style.display = "none";
}
this.className = "select";
txts[this.id].style.display = "block";
}
}
}
</script>
</body>
</html>
2.鼠標(biāo)移入移出延時(shí)切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切換之延時(shí)切換</title>
<style type="text/css">
* {padding: 0;margin: 0;}
li {list-style: none;}
.wrapper {
margin: 0 auto;
width: 100%;
max-width: 1140px;
}
.tabbox {
margin: 40px auto;
width: 400px;
height: 200px;
border: 1px solid #f70;
overflow: hidden;
}
.tabbox .tab-tit{
position: relative;
height: 40px;
}
ul {
position: absolute;
left: -1px;
width: 401px;
height: 40px;
line-height: 40px;
background-color: #eaeaea;
}
ul li {
float: left;
border-left: 1px solid #f70;
border-bottom: 1px solid #f70;
text-align: center;
width: 99px;
height: 40px;
overflow: hidden;
}
.clear {clear: both;}
.select {
padding-right: 1px;
border-bottom: none;
background-color: #fff;
}
a:link, a:visited {
font-size: 16px;
font-weight: bold;
color: #888;
text-decoration: none;
}
.select a {
color: #333;
}
a:hover, a:active {
color: #f20;
font-weight: bold;
}
.tab-txt {
width: 400px;
padding: 40px;
overflow: hidden;
}
.demo {display: none;}
.tab-txt p {
line-height: 40px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="tabBox" class="tabbox">
<div id="tabTit" class="tab-tit">
<ul>
<li class="select"><a href="javascript:;">女槍</a></li>
<li><a href="javascript:;">提莫</a></li>
<li><a href="javascript:;">蓋倫</a></li>
<li><a href="javascript:;">劍圣</a></li>
</ul>
</div>
<!-- <div class="clear"></div> -->
<div id="tabTxt" class="tab-txt">
<div class="demo" style="display: block;">
<p>我有兩把槍，一把叫射，另一把叫，啊~</p>
<p>你有一雙迷人的眼睛，我非常喜歡！</p>
</div>
<div class="demo">
<p>我去前面探探路</p>
<p>提莫隊(duì)長(zhǎng)正在待命！</p>
</div>
<div class="demo">
<p>放馬過來吧，你會(huì)死的很光榮的！</p>
<p>快點(diǎn)兒結(jié)束吧，我頭有點(diǎn)兒轉(zhuǎn)暈了……</p>
</div>
<div class="demo">
<p>我的劍就是你的劍。</p>
<p>眼睛多，看東西才會(huì)更加清楚</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
var timer = null;
var tits = $("tabTit").getElementsByTagName("li");
var txts = $("tabTxt").getElementsByClassName("demo");
if(tits.length != txts.length) {return;}
for(var i=0,l=tits.length; i<l; i++) {
tits[i].id = i;
tits[i].onmouseover = function() {
var that = this;
if(timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function() {
for(var j=0; j<l; j++) {
tits[j].className = "";
txts[j].style.display = "none";
}
that.className = "select";
txts[that.id].style.display = "block";
},500);
}
}
}
</script>
</body>
</html>
3. tab自動(dòng)切換，鼠標(biāo)移入移出立即切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切換之自動(dòng)切換</title>
<style type="text/css">
* {padding: 0;margin: 0;}
li {list-style: none;}
.wrapper {
margin: 0 auto;
width: 100%;
max-width: 1140px;
}
.tabbox {
margin: 40px auto;
width: 400px;
height: 200px;
border: 1px solid #f70;
overflow: hidden;
}
.tabbox .tab-tit{
position: relative;
height: 40px;
}
ul {
position: absolute;
left: -1px;
width: 401px;
height: 40px;
line-height: 40px;
background-color: #eaeaea;
}
ul li {
float: left;
border-left: 1px solid #f70;
border-bottom: 1px solid #f70;
text-align: center;
width: 99px;
height: 40px;
overflow: hidden;
}
.clear {clear: both;}
.select {
padding-right: 1px;
border-bottom: none;
background-color: #fff;
}
a:link, a:visited {
font-size: 16px;
font-weight: bold;
color: #888;
text-decoration: none;
}
.select a {
color: #333;
}
a:hover, a:active {
color: #f20;
font-weight: bold;
}
.tab-txt {
width: 400px;
padding: 40px;
overflow: hidden;
}
.demo {display: none;}
.tab-txt p {
line-height: 40px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="tabBox" class="tabbox">
<div id="tabTit" class="tab-tit">
<ul>
<li class="select"><a href="javascript:;">女槍</a></li>
<li><a href="javascript:;">提莫</a></li>
<li><a href="javascript:;">蓋倫</a></li>
<li><a href="javascript:;">劍圣</a></li>
</ul>
</div>
<!-- <div class="clear"></div> -->
<div id="tabTxt" class="tab-txt">
<div class="demo" style="display: block;">
<p>我有兩把槍，一把叫射，另一把叫，啊~</p>
<p>你有一雙迷人的眼睛，我非常喜歡！</p>
</div>
<div class="demo">
<p>我去前面探探路</p>
<p>提莫隊(duì)長(zhǎng)正在待命！</p>
</div>
<div class="demo">
<p>放馬過來吧，你會(huì)死的很光榮的！</p>
<p>快點(diǎn)兒結(jié)束吧，我頭有點(diǎn)兒轉(zhuǎn)暈了……</p>
</div>
<div class="demo">
<p>我的劍就是你的劍。</p>
<p>眼睛多，看東西才會(huì)更加清楚</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
var index = 0;
var timer = null;
var tits = $("tabTit").getElementsByTagName("li");
var txts = $("tabTxt").getElementsByClassName("demo");
if(tits.length != txts.length) {return;}
for(var i=0,l=tits.length; i<l; i++) {
tits[i].id = i;
tits[i].onmouseover = function() {
clearInterval(timer);
styleFun(this.id);
}
tits[i].onmouseout = function() {
timer = setInterval(autoPlay, 2000);
}
}
//在開啟定時(shí)器的同時(shí)清楚定時(shí)器并置空
if(timer) {
clearInterval(timer);
timer = null;
}
timer = setInterval(autoPlay, 2000);
function autoPlay() {
index++;
if(index >= tits.length) {
index = 0;
}
styleFun(index);
}
function styleFun(ele) {
for(var j=0,m=tits.length; j<m; j++) {
tits[j].className = "";
txts[j].style.display = "none";
}
tits[ele].className = "select";
txts[ele].style.display = "block";
//將鼠標(biāo)移入移出時(shí)的index傳給autoPlay;
index = ele;
}
}
</script>
</body>
</html>
4. 廣告欄切換實(shí)例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
height: 170px;
width: 490px;
margin: 20px auto;
overflow: hidden;
position: relative;
margin: 100px auto;
}
.wrap ul {
position: absolute;
}
.wrap ul li {
height: 170px;
}
.wrap ol {
position: absolute;
right: 5px;
bottom: 10px;
}
.wrap ol li {
height: 20px;
width: 20px;
background: #ccc;
border: solid 1px #666;
margin-left: 5px;
color: #000;
float: left;
line-height: center;
text-align: center;
cursor: pointer;
}
.wrap ol .on {
background: #E97305;
color: #fff;
}
</style>
<script type="text/javascript">
window.onload = function() {
var wrap = document.getElementById('wrap'),
pic = document.getElementById('pic'),
piclist = pic.getElementsByTagName('li'),
list = document.getElementById('list').getElementsByTagName('li'),
picheight = 170,
index = 0,
timer = null;
if(piclist.length != list.length) {
return;
}
// 定義并調(diào)用自動(dòng)播放函數(shù)
if(timer) {
clearInterval(timer);
timer = null;
}
timer = setInterval(picFunc, 2000);
function picFunc() {
index++;
if(index >= piclist.length) {
index = 0;
}
changePic(index);
}
// 定義圖片切換函數(shù)
function changePic(ele) {
for(var j = 0, m = piclist.length; j < m; j++) {
list[j].className = "";
}
pic.style.top = -ele * picheight + "px";
list[ele].className = "on";
index = ele;
}
// 鼠標(biāo)劃過整個(gè)容器時(shí)停止自動(dòng)播放
wrap.onmouseover = function() {
clearInterval(timer);
}
// 鼠標(biāo)離開整個(gè)容器時(shí)繼續(xù)播放至下一張
wrap.onmouseout = function() {
timer = setInterval(picFunc, 2000);
}
// 遍歷所有數(shù)字導(dǎo)航實(shí)現(xiàn)劃過切換至對(duì)應(yīng)的圖片
for(var i = 0, l = list.length; i < l; i++) {
list[i].id = i;
list[i].onmouseover = function() {
changePic(this.id);
}
}
}
</script>
</head>
<body>
<div class="wrap" id='wrap'>
<ul id="pic">
<li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
<li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- 微信小程序 swiper制作tab切換實(shí)現(xiàn)附源碼
- js中常用的Tab切換效果(推薦)
- jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果
- 最簡(jiǎn)單的tab切換實(shí)例代碼
- Android App中制作仿MIUI的Tab切換效果的實(shí)例分享
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- javascript實(shí)現(xiàn)tab切換的兩個(gè)實(shí)例
- javascript實(shí)現(xiàn)tab切換的四種方法
- jquery實(shí)現(xiàn)初次打開有動(dòng)畫效果的網(wǎng)頁(yè)TAB切換代碼
- jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果
相關(guān)文章
今天把項(xiàng)目生成好后，發(fā)布到萬維網(wǎng)上進(jìn)行測(cè)試，發(fā)現(xiàn)table的隔行換色在IE8，chorem中不能正常顯示。找了許多資料，CSS看樣是不能解決，只能用JS來控制了2010-07-07
JS模仿MSN右下角彈出提示框代碼，需要的朋友可以參考下。2010-09-09
javascript 手機(jī)號(hào)碼驗(yàn)證是否正確
javascript 手機(jī)號(hào)碼驗(yàn)證實(shí)現(xiàn)代碼。2009-06-06
JS使用Date對(duì)象實(shí)時(shí)顯示當(dāng)前系統(tǒng)時(shí)間簡(jiǎn)單示例
這篇文章主要介紹了JS使用Date對(duì)象實(shí)時(shí)顯示當(dāng)前系統(tǒng)時(shí)間,涉及javascript基于定時(shí)器動(dòng)態(tài)操作Date對(duì)象相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
高性能JavaScript模板引擎實(shí)現(xiàn)原理詳解
這篇文章主要介紹了JavaScript模板引擎實(shí)現(xiàn)原理詳解,本文著重講解artTemplate模板的實(shí)現(xiàn)原理,它采用預(yù)編譯方式讓性能有了質(zhì)的飛躍,是其它知名模板引擎的25、32 倍,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了js命名空間寫法,以完整實(shí)例形式分析了JavaScript命名空間的寫法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
getElementByIdx_x js自定義getElementById函數(shù)
最近看JS代碼，發(fā)現(xiàn)不少人問getElementByIdx_x是什么函數(shù)，其實(shí)就是個(gè)getElementById自定義函數(shù)2012-01-01
js中自定義方法實(shí)現(xiàn)停留幾秒sleep
js中不存在自帶的sleep方法，要想休眠要自己定義個(gè)方法,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了JS是按值傳遞還是按引用傳遞(推薦)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出菜單動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06