幾種tab切換詳解
- 高洛峰原創
- 2017-02-08 16:24:491732瀏覽
本文主要分享了幾種tab切換的範例程式碼。具有很好的參考價值，下面跟著小編一起來看下吧
1.老鼠移入移出切換
<!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>
<p class="wrapper">
<p id="tabBox" class="tabbox">
<p 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>
</p>
<!-- <p class="clear"></p> -->
<p id="tabTxt" class="tab-txt">
<p class="demo" style="display: block;">
<p>我有两把枪，一把叫射，另一把叫，啊~</p>
<p>你有一双迷人的眼睛，我非常喜欢！</p>
</p>
<p class="demo">
<p>我去前面探探路</p>
<p>提莫队长正在待命！</p>
</p>
<p class="demo">
<p>放马过来吧，你会死的很光荣的！</p>
<p>快点儿结束吧，我头有点儿转晕了……</p>
</p>
<p class="demo">
<p>我的剑就是你的剑。</p>
<p>眼睛多，看东西才会更加清楚</p>
</p>
</p>
</p>
</p>
<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.滑鼠移入移出延時切換
2.鼠移入移出延時切換
2.滑鼠移入移出延時
3. tab自動切換，滑鼠移入移出立即切換
<!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>
<p class="wrapper">
<p id="tabBox" class="tabbox">
<p 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>
</p>
<!-- <p class="clear"></p> -->
<p id="tabTxt" class="tab-txt">
<p class="demo" style="display: block;">
<p>我有两把枪，一把叫射，另一把叫，啊~</p>
<p>你有一双迷人的眼睛，我非常喜欢！</p>
</p>
<p class="demo">
<p>我去前面探探路</p>
<p>提莫队长正在待命！</p>
</p>
<p class="demo">
<p>放马过来吧，你会死的很光荣的！</p>
<p>快点儿结束吧，我头有点儿转晕了……</p>
</p>
<p class="demo">
<p>我的剑就是你的剑。</p>
<p>眼睛多，看东西才会更加清楚</p>
</p>
</p>
</p>
</p>
<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>
4.廣告欄切換實例
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：js定時器的使用(實例講解)下一篇：js定時器的使用(實例講解)