翻出先前做的一个仿163Tab切换功能的简单代码
翻出以前做的一个仿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上面的文件,如果你没有互联网只能自己找一个然后修改一下文件路径了