翻出以前做的一个仿163Tab切换功能的简单代码
最近改网站需要用标签切换，懒得再写了就翻出了以前的代码，里面还有很多地方还是可以优化的，暂时就先不改动了
当然这里的代码仅仅是个例子，使用了jquery，也许很多用过的人都会觉得没什么，不过参考了163的设计思路将通用方法封装成函数还是比较方便的
这里因为只有一个，所以对于一个页面里面多个这样功能的需要简单修改，
就是在 tab(".d_t",".b","on","mouseover")这个调用的函数里面对应增加一层
比如 .d_t这个样式外面增加一个 d1这样的一个div层，传入的样式就是 ".d1 .d_t"
这里面前两个是传入jquery选择器的样式代码，当然也可以是id 比如某个div的id是d1
传入的样式就改成 "#d1 .d_t"
其实最好的还是应该将$(".d_t")这样的jquery对象作为参数传入
如下面的例子，比较建议没有进行过多的样式美化，目的都是为了去掉类似id一样的限制，比如必须指定某个选框必须叫 d1 d2，而且换也只能针对 d1 d2，另外再有的时候又需要指定e1 e2 之类的代码
上面这个精简了很多代码比较容易理解
这个里面就是用了上面推荐的 传入jquery对象的方法
tab2($(".c li"),$(".d"),"on","click");
这里面 a b c d e对应的就是$(".c li")这个jquery对象
1 2 3 4 5对应的是$(".d")这个jquery对象
不过推荐的方法是在两个的外面再加一层并使用不同的class或者id避免冲突
on是一个class 对应的是初始时候显示div的样式
最后的click对应的是事件，比如这里就是点击后切换，前面的mouseover就是鼠标经过时切换
给了完整代码了，复制到记事本里面另存为随意的 .html 就可以通过ie或ff看效果了
上面效果图我也放了两个
补充，里面用到了jquery.js文件，我使用的是google上面的文件，如果你没有互联网只能自己找一个然后修改一下文件路径了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>仿163 tab</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
function tab(o1,o2,c,e){
$(o1).each(function(i){
$(this).bind(e,function(){
$(o2).hide("").eq(i).show();
$(o1).each(function(){
$(this).removeClass(c);
});
$(this).addClass(c);
})
if ($(this).hasClass(c)) {
$(this).addClass(c);
$(o2).hide().eq(i).show();
}
})
}
tab(".d_t",".b","on","mouseover");
});
</script>
<style>
html body {margin:0px; padding:0px; font-size:12px;}
u {display: block;overflow: hidden;height: 1px; border-color:#77a;}
.u1 {margin:0px 3px; background-color:#77a;}
.u2 {margin:0px 1px; border-left:2px solid; border-right:2px solid;}
.u3 {margin:0px 1px; border-left:1px solid; border-right:1px solid;}
.d_body {margin:50px;width:400px; height:400px;}
.d_top {height:40px; border-left:1px solid #77a; border-right:1px solid #77a;}
.d_t {float:left; margin-top:7px; margin-left:10px; border:1px solid #77a; width:100px; height:31px; line-height:31px; background-color:#eee;}
.d_t a {color:#555; text-decoration:none;}
.d_t a:hover {color:#933; text-decoration:underline; font-weight:bold; }
.d_main {border:1px solid #77a; border-top:0px; height:300px;}
.ln {position:relative; border-bottom:1px solid #77a; top:40px; z-index:-1;}
.b {background-color:#fff; height:100%; display:none; margin:10px;}
.on {border-bottom:1px solid #fff; background-color:#fff;}
.fl {float:left;}
.clr {clear:both;}
.of {overflow:hidden;}
.textcenter{text-align:center;vertical-align:middle;}
</style>
</head>
<body>
<div class="d_body">
<u class="u1"></u><u class="u2"></u><u class="u3"></u>
<div class="d_top">
<div class="ln"></div>
<div class="d_t textcenter on">
<a href="javascript:">第一个标签</a>
</div>
<div class="d_t textcenter">
<a href="javascript:">第二个标签</a>
</div>
<div class="d_t textcenter">
<a href="javascript:">第三个标签</a>
</div>
</div>
<div class="d_main clr of">
<div class="b"><font color="blue">第一个内容</font></div>
<div class="b"><font color="red">第二个内容</font></div>
<div class="b"><font color="black">第三个内容</font></div>
</div>
<div class="clr of"></div>
</div>
</body>
</html>
当然这里的代码仅仅是个例子，使用了jquery，也许很多用过的人都会觉得没什么，不过参考了163的设计思路将通用方法封装成函数还是比较方便的
这里因为只有一个，所以对于一个页面里面多个这样功能的需要简单修改，
就是在 tab(".d_t",".b","on","mouseover")这个调用的函数里面对应增加一层
比如 .d_t这个样式外面增加一个 d1这样的一个div层，传入的样式就是 ".d1 .d_t"
这里面前两个是传入jquery选择器的样式代码，当然也可以是id 比如某个div的id是d1
传入的样式就改成 "#d1 .d_t"
其实最好的还是应该将$(".d_t")这样的jquery对象作为参数传入
如下面的例子，比较建议没有进行过多的样式美化，目的都是为了去掉类似id一样的限制，比如必须指定某个选框必须叫 d1 d2，而且换也只能针对 d1 d2，另外再有的时候又需要指定e1 e2 之类的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.a {background-color:#eee; width:20px; cursor:pointer; float:left; margin-left:10px; text-align:center;}
.b {background-color:#eae; width:250px; height:250px; display:none; font-size:50px;}
.c li{float:left;background-color:#eee; width:20px; cursor:pointer; float:left; margin-left:10px; text-align:center;}
.d {background-color:#eae; width:250px; height:250px; display:none; font-size:50px;}
.on {background-color:#c21; width:30px; border:5px solid red; border-bottom:0px; border-top:0px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
function tab2(o1,o2,c,e){
o1.each(function(i){
$(this).bind(e,function(){
o2.hide().eq(i).show();
o1.each(function(){
$(this).removeClass(c);
});
$(this).addClass(c);
})
if ($(this).hasClass(c)) {
$(this).addClass(c);
o2.hide().eq(i).show();
}
})
}
//tab2(".a",".b","on","click");
tab2($(".a"),$(".b"),"on","mouseover");
tab2($(".c li"),$(".d"),"on","click");
});
</script>
</head>
<body>
<div class="a">a</div>
<div class="a">b</div>
<div class="a">c</div>
<div class="a">d</div>
<div class="a on">e</div><br>
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
<div class="b">5</div>
<br><br>
<ul class="c">
<li>1</li>
<li class="on">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul><br>
<div class="d">1</div>
<div class="d">2</div>
<div class="d">3</div>
<div class="d">4</div>
<div class="d">5</div>
</body>
</html>
上面这个精简了很多代码比较容易理解
这个里面就是用了上面推荐的 传入jquery对象的方法
tab2($(".c li"),$(".d"),"on","click");
这里面 a b c d e对应的就是$(".c li")这个jquery对象
1 2 3 4 5对应的是$(".d")这个jquery对象
不过推荐的方法是在两个的外面再加一层并使用不同的class或者id避免冲突
on是一个class 对应的是初始时候显示div的样式
最后的click对应的是事件，比如这里就是点击后切换，前面的mouseover就是鼠标经过时切换
给了完整代码了，复制到记事本里面另存为随意的 .html 就可以通过ie或ff看效果了
上面效果图我也放了两个
补充，里面用到了jquery.js文件，我使用的是google上面的文件，如果你没有互联网只能自己找一个然后修改一下文件路径了