大家好，我很喜欢如下这个选项卡，但是现在碰到一个问题，就是当页面中需要2个或以上个数的选项卡时会出现问题，
怎么使各个
相互独立，不相互影响，并在打开页面时显示[b]选项1和选项4[/b]，代码如下：
请各位帮忙：
[code="java"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">jquery实现tab淡变选项卡效果 .tab { background-color: #FAFAFA; margin: 5px 8px; padding: 5px 10px; } .tab p span { background-color: #EFEFEF; border: 1px solid #CCCCCC; cursor: pointer; margin-right: 3px; padding: 2px 5px; } .tab p span.current { background-color: #FAFAFA; border-bottom-color: #fafafa; } .tab p { border-bottom: 1px solid #CCCCCC; font-weight: bold; padding: 0 8px 2px; margin: 0; } .tab ul { width:500px; background:url(tu/about.jpg) right no-repeat; margin: 2px auto 2px 8px; padding:0; } .tab li { width:300px; border-bottom: 1px dotted #CCCCCC; padding-bottom: 3px; margin: 2px 0; list-style-type=none; } .tab .mhot, .tab.allhot { display: none; } $(document).ready(function() { $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式 $(".tab ul:not(:first)").hide(); //隐藏其它的UL $(".tab span").mouseover(function() { $(".tab span").removeClass("current"); //去掉所有SPAN的样式 $(this).addClass("current"); $(".tab ul").hide(); $("." + $(this).attr("id")).fadeIn('slow'); }); });
JS如果没加载请刷新
[/code]
代码改进：
[code="javascript"]
/**
* 对指定id的div添加Tab功能
*/
function addTab(_id) {
var curDivTab = $("div[id=" + _id + "].tab"); // 根据id获取具有tab功能的div对象
curDivTab.find("span:first").addClass("current"); //为第一个SPAN添加当前效果样式
curDivTab.find("ul:not(:first)").hide(); //隐藏其它的UL
curDivTab.find("span").mouseover(function() {
curDivTab.find("span").removeClass("current"); //去掉所有SPAN的样式
$(this).addClass("current");
curDivTab.find("ul").hide();
curDivTab.find("." + $(this).attr("id")).fadeIn('slow');
});
}
[/code]
建议使用jQuery UI Tabs插件。它是基于 jQuery 的一个Tab选项卡导航。
参考网页：[url]http://www.cssrain.cn/demo/jquery-ui-tab/demo5-%E4%B8%80%E4%B8%AA%E9%A1%B5%E9%9D%A22%E7%A7%8D%E6%A0%B7%E5%BC%8F.html[/url]
Tab的话可以使用现有的组件：
6个出色的基于JQuery的Tab选项卡实例
[url]http://www.jgpy.cn/blog/front-end/6_cool_tabs_nav_on_jQuery.htm[/url]
如果你要用你自己的代码，可以这样实现你的要求：
[code="javascript"]
$(document).ready(function() { addTab("div1"); addTab("div2"); }); /** * 对指定id的div添加Tab功能 */ function addTab(_id) { $("[id=" + _id + "].tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式 $("[id=" + _id + "].tab ul:not(:first)").hide(); //隐藏其它的UL $("[id=" + _id + "].tab span").mouseover(function() { $("[id=" + _id + "].tab span").removeClass("current"); //去掉所有SPAN的样式 $(this).addClass("current"); $("[id=" + _id + "].tab ul").hide(); $("." + $(this).attr("id")).fadeIn('slow'); }); }
[/code]