tab选框集合
圆角参考了经典论坛中坛友建议，把原来用的<u>换成了 <span>其实原理还是差不多的
淡入淡出的效果是更新网站时候的需求。。没有办法 只好实现了。。。
最开始图省事做的仿163切换的太简易了，后来扩充了一些东西，抛砖作为一个写的思路
有的代码重用性很大，完全可以把相同功能的写成函数，不要一遍一遍的再每一个页面都写上一堆一堆的<script>代码，太乱 而且管理也不方便
最后面的例子只是提供了一个扩充的思路。比如焦点图需要大图，小图，还有文字描述
具体样式就需要美工们自己去设计了！
这个是套用了tab2方法实现的
实现思路，需要最外层一个div，左侧大图浮动居左，初始时display:none;
右侧四个小图浮动居右
对于tab2传入值：
tab2($(".d2 .aa"),$(".d2 .bb"),"on",1500,800,0.1,1);
.d2是最外层div的class .bb是每个图片外的class .aa是右侧小图对应的class
on为小图的特殊样式--选中时
1500: 标签切换时间
800: 图片淡入时间
0.1: 内容渐进起始半透明度
1: 内容渐进结束半透明度
页面中需要多个的时候只需要修改 .d2 只要能保证每个焦点图外层的class是唯一的就行
或者使用id的选择器指定div
必须文件为jquery.js 版本理论上1.4.2就好，1.3.2无淡入淡出效果
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Tab</title><style>html body {margin:0px; padding:0px;}.t_body{border:1px solid #ddd; padding:10px; width:250px; margin:50px;float:left;}.aa{background-color:#eee; width:25px; cursor:pointer; float:left; margin-left:10px; text-align:center;}.bb{background-color:#eae; width:250px; height:250px; display:none; font-size:50px;}.cc{background-color:#eee; width:100%; height:20px; display:none;}.on{background-color:#c21; width:30px; border-bottom:0px; border-top:0px;}/* ---------- */.yuan1 span{display: block;overflow: hidden;height: 1px; border-color:#77a;} .yuan2 span{display: block;overflow: hidden;height: 1px; border-color:#77a;} .span1{margin:0px 3px; background-color:#77a;}.span2{margin:0px 1px; border-left:2px solid; border-right:2px solid;}.span3{margin:0px 1px; border-left:1px solid; border-right:1px solid;}.d_body{margin:50px;width:400px; height:400px; font-size:12px;float:left;}.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;}.bbb{background-color:#fff; height:100%; display:none; margin:10px;}.on1{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><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script><script><!--$(document).ready(function() {/*o1: 标签元素o2: 内容元素c : 标签元素显示用样式e : 触发事件 如 click mouseover */function tab1(o1,o2,c,e){o1.each(function(i){$(this).bind(e,function(){o2.hide().eq(i).show();o1.removeClass(c);$(this).addClass(c);})if ($(this).hasClass(c)) {$(this).addClass(c);o2.hide().eq(i).show();}})}/*o1: 标签元素o2: 内容元素c : 标签元素显示用样式t1: 标签切换时间t2: 内容渐进时间a : 内容渐进起始半透明度 0.1~1b : 内容渐进结束半透明度 0.1~1*/function tab2(o1,o2,c,t1,t2,a,b){var count=o1.size()-1;var now;var TimeInterval;o1.each(function(i){$(this).mouseover(function(){o2.hide().eq(i).show();o1.removeClass(c);$(this).addClass(c);window.clearInterval(TimeInterval);}).mouseout(function(){now = i+1;TimeInterval = window.setInterval(changeimage,t1);});//初始化显示if ($(this).hasClass(c)) {$(this).addClass(c);o2.hide().eq(i).show();now = i+1;}})TimeInterval = window.setInterval(changeimage,t1);function changeimage(){if(now>count)now=0;o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);o1.removeClass(c).eq(now).addClass(c);now++;}}/*o1: 标签元素o2: 内容元素o3: 内容元素c : 标签元素显示用样式e : 触发事件 如 click mouseover */function tab3(o1,o2,o3,c,e){o1.each(function(i){$(this).bind(e,function(){o2.hide().eq(i).show();o3.hide().eq(i).show();o1.removeClass(c);$(this).addClass(c);})if ($(this).hasClass(c)) {$(this).addClass(c);o2.hide().eq(i).show();o3.hide().eq(i).show();}})}/*o1: 标签元素o2: 内容元素o3: 内容元素c : 标签元素显示用样式t1: 标签切换时间t2: 内容渐进时间a : 内容渐进起始半透明度 0.1~1b : 内容渐进结束半透明度 0.1~1*/function tab4(o1,o2,o3,c,t1,t2,a,b){var count=o1.size()-1;var now;var TimeInterval;o1.each(function(i){$(this).mouseover(function(){o2.hide().eq(i).show();o3.hide().eq(i).show();o1.removeClass(c);$(this).addClass(c);window.clearInterval(TimeInterval);}).mouseout(function(){now = i+1;TimeInterval = window.setInterval(changeimage,t1);});//初始化显示if ($(this).hasClass(c)) {$(this).addClass(c);o2.hide().eq(i).show();o3.hide().eq(i).show();now = i+1;}})TimeInterval = window.setInterval(changeimage,t1);function changeimage(){if(now>count)now=0;o3.hide().eq(now).show();o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);o1.removeClass(c).eq(now).addClass(c);now++;}}/*[color=red]代码会执行，所以只能注释掉！运行的时候记得把这里的注释去掉[/color]//调用函数tab1($(".yuan1 .d_t"),$(".yuan1 .bbb"),"on1","mouseover");tab1($(".yuan2 .d_t"),$(".yuan2 .bbb"),"on1","click");tab1($(".d0 .aa"),$(".d0 .bb"),"on","click");tab1($(".d1 .aa"),$(".d1 .bb"),"on","mouseover");tab2($(".d2 .aa"),$(".d2 .bb"),"on",1500,800,0.1,1);tab3($(".d3 .aa"),$(".d3 .bb"),$(".d3 .cc"),"on","mouseover");tab4($(".d4 .aa"),$(".d4 .bb"),$(".d4 .cc"),"on",1500,800,0.1,1);tab4($(".d5 .aa"),$(".d5 .bb"),$(".d5 .cc"),"on",1500,0,1,1);*/});--></script></head><body><div class="d_body yuan1"><div>鼠标悬浮切换</div><br><span class="span1"></span><span class="span2"></span><span class="span3"></span><div class="d_top"><div class="ln"></div><div class="d_t textcenter on1"><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="bbb"><font color="blue">第一个内容</font></div><div class="bbb"><font color="red">第二个内容</font></div><div class="bbb"><font color="black">第三个内容</font></div></div><div class="clr of"></div></div><div class="d_body yuan2"><div>点击切换</div><br><span class="span1"></span><span class="span2"></span><span class="span3"></span><div class="d_top"><div class="ln"></div><div class="d_t textcenter on1"><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="bbb"><font color="blue">第一个内容</font></div><div class="bbb"><font color="red">第二个内容</font></div><div class="bbb"><font color="black">第三个内容</font></div></div><div class="clr of"></div></div><div class="t_body d0"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">点击切换</div><div class="bb">4</div><div class="bb">5</div><div style="clear:both;"></div></div><div class="t_body d1"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">3</div><div class="bb">4</div><div class="bb">5</div><div style="clear:both;"></div></div><div class="t_body d2"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">3</div><div class="bb">4</div><div class="bb">5</div><div style="clear:both;"></div></div><div class="t_body d3"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">悬浮切换</div><div class="bb">4</div><div class="bb">5</div><div class="cc">111111</div><div class="cc">222222</div><div class="cc">333333</div><div class="cc">444444</div><div class="cc">555555</div><div style="clear:both;"></div></div><div class="t_body d4"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">3</div><div class="bb">4</div><div class="bb">5</div><div class="cc">111111</div><div class="cc">222222</div><div class="cc">333333</div><div class="cc">444444</div><div class="cc">555555</div><div style="clear:both;"></div></div><div class="t_body d5"><div class="aa">a</div><div class="aa">b</div><div class="aa on">c</div><div class="aa">d</div><div class="aa">e</div><br><div class="bb">1</div><div class="bb">2</div><div class="bb">3</div><div class="bb">4</div><div class="bb">5</div><div class="cc">111111</div><div class="cc">222222</div><div class="cc">333333</div><div class="cc">444444</div><div class="cc">555555</div><div style="clear:both;"></div></div></body></html> 1 楼 lxtx517 2011-03-21 很早就是span了啊 2 楼 yuqihui 2011-04-09 为什么在firefox不能用呢 3 楼 pywepe 2011-04-11 想把你这个封装成 jsp tag