翻出以前做的一个仿163Tab切换功能的简单代码
最近改网站需要用标签切换，懒得再写了就翻出了以前的代码，里面还有很多地方还是可以优化的，暂时就先不改动了
<!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 />
<!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上面的文件，如果你没有互联网只能自己找一个然后修改一下文件路径了