封装的前端栏目选项卡(滑动门)
第一种不带自动切换
<!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=gb2312″ />
<meta name=”description” content=”前端思考，专注前端开发，关注用户体验，artskin artcss ” />
<meta name=”keywords” content=”前端思考,artskin,artcss ” />
<script type=”text/javascript” src=”http://www.brucehan.com/bat/js/jq_1.4.js”></script>
<title>最简单的弹出层：前端思考</title>
<style>
*{margin:0;padding:0px;font-family:Microsoft YaHei,Verdana,Arial;}
h2{clear:both;padding:10px;font-size:16px;font-weight:normal}
.tab{margin-left:10px;float:left;display:inline;}
.tab dt{height:20px;}
.tab dt span{display:block;width:50px;height:20px;line-height:20px;text-align:center;float:left;margin-right:1px;display:inline;cursor:default;background:#ddd;}
.tab dt span.current{background:green;color:#fff;}
.tab dd{width:201px;height:100px;font-size:36px;text-align:center;line-height:100px;border:1px solid green;display:none}
</style>
<script type=”text/javascript”>
$(function(){
var i=0;
function oTab (){
$(this).addClass(“current”).siblings().removeClass(“current”).parent().siblings().hide().siblings(“.”+$(this).attr(“id”)).show();
}
$(“.tabt span,.tabt2 span”).mouseover(oTab);
$(“.tabt3 span”).click(oTab);
});
</script>
</head>
<body>
<h2>一、鼠标滑过（调用两个）</h2>
<dl>
<dt>
<span id=”t1″>111</span>
<span id=”t2″>222</span>
<span id=”t3″>333</span>
<span id=”t4″>444</span>
</dt>
<dd style=”display:block”>一</dd>
<dd>二</dd>
<dd>三</dd>
<dd>四</dd>
</dl>
<dl>
<dt>
<span id=”c1″>111</span>
<span id=”c2″>222</span>
<span id=”c3″>333</span>
<span id=”c4″>444</span>
</dt>
<dd style=”display:block”>一</dd>
<dd>二</dd>
<dd>三</dd>
<dd>四</dd>
</dl>
<h2>二、鼠标点击</h2>
<dl>
<dt>
<span id=”d1″>111</span>
<span id=”d2″>222</span>
<span id=”d3″>333</span>
<span id=”d4″>444</span>
</dt>
<dd style=”display:block”>一</dd>
<dd>二</dd>
<dd>三</dd>
<dd>四</dd>
</dl>
</body>
</html>
第二种带自动切换功能！
<!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=gb2312″ />
<meta name=”description” content=”前端思考，专注前端开发，关注用户体验，artskin artcss ” />
<meta name=”keywords” content=”前端思考,artskin,artcss ” />
<script type=”text/javascript” src=”http://www.artcss.com/js/jq_1.4.js”></script>
<title>最简单的弹出层：前端思考</title>
<style>
*{margin:0;padding:0px;font-family:Microsoft YaHei,Verdana,Arial;}
h2{clear:both;padding:10px;font-size:16px;font-weight:normal}
.tab{margin-left:10px;float:left;display:inline;}
.tab dt{height:20px;}
.tab dt span{display:block;width:50px;height:20px;line-height:20px;text-align:center;float:left;margin-right:1px;display:inline;cursor:default;background:#ddd;}
.tab dt span.current{background:green;color:#fff;}
.tab dd{width:201px;height:100px;font-size:36px;text-align:center;line-height:100px;border:1px solid green;display:none}
</style>
<script type=”text/javascript”>
$(function(){
var i=0;
function oTab (){
$(this).addClass(“current”).siblings().removeClass(“current”).parent().siblings().hide()
.siblings(“.”+$(this).attr(“id”)).show();
i = $(“.tabt4 span”).index(this);
}
function oStart(i){
$(“.tabt4 span”).eq(i).addClass(“current”).siblings().removeClass(“current”);
$(“#auto dd”).eq(i).show().siblings(“dd”).hide();
}
function oTimer(){
oStart(i);
i++;
if(i==4) {
i=0;
}
}
var myTimer = setInterval(oTimer,1000);
//鼠标悬停和移开的情况用hover
$(“#auto”).hover(function(){
if(myTimer) {
clearInterval(myTimer);
}
},function(){
myTimer = setInterval(oTimer,1000);
});
$(“.tabt span,.tabt2 span,.tabt4 span”).mouseover(oTab);
$(“.tabt3 span”).click(oTab);
});
</script>
</head>
<body>
<h2>一、鼠标滑过（调用两个）</h2>
<dl>
<dt>
<span id=”t1″>111</span>
<span id=”t2″>222</span>
<span id=”t3″>333</span>
<span id=”t4″>444</span>
</dt>
<dd style=”display:block”>一</dd>
<dd>二</dd>
<dd>三</dd>
<dd>四</dd>
</dl>
<dl>
<dt>
<span id=”c1″>111</span>
<span id=”c2″>222</span>
<span id=”c3″>333</span>
<span id=”c4″>444</span>
</dt>
<dd style=”display:block”>一</dd>
<dd>二</dd>
<dd>三</dd>
<dd>四</dd>
</dl>
<h2>二、鼠标点击</h2>
<dl>
<dt>
<span id=”d1″>111</span>
<span id=”d2″>222</span>
<span id=”d3″>333</span>
<span id=”d4″>444</span>
</dt>
<dd style=”display:block”>一</dd>
<dd>二</dd>
<dd>三</dd>
<dd>四</dd>
</dl>
<h2>三、自动切换</h2>
<dl id=”auto”>
<dt>
<span id=”e1″>111</span>
<span id=”e2″>222</span>
<span id=”e3″>333</span>
<span id=”e4″>444</span>
</dt>
<dd style=”display:block”>一</dd>
<dd>二</dd>
<dd>三</dd>
<dd>四</dd>
</dl>
</body>
</html>
原文出处：前段思考
版权声明：封装的前端栏目选项卡(滑动门)系原创文章，转载请注明出自Bruce[http://brucehan.com]
