刚写的一个简单的JQuery动态选项卡
HTML:
?
<div name="code"><style type="text/css">.tab-Main{width: 500px;}.tab-ControlPanel{float: left;width: 100%;color: white;}.tab-TabSpan{float: left;padding-left:9px;padding-right:9px;margin-left:2px;margin-right:2px;display: inline;cursor:pointer;background-color: #77ADE3;}.tab-TabSpan-Selected{background-color: #3485D6;}.tab-TabSpan-Hover{background-color: #3485D6;}.tab-Container{float: left;width: 100%;margin-left: 2px;border: 1px solid #3485D6;}.tab-Content{width:100%;float: left;display: none;}</style>?JQuery代码：
?
<SCRIPT type="text/javascript"> $(function(){ var $tabSpans = $(".tab-TabSpan"); var $contents = $(".tab-Content"); $(".tab-TabSpan").click(function(){ var index = $tabSpans.index(this); $tabSpans.eq(index).addClass("tab-TabSpan-Selected").siblings().removeClass("tab-TabSpan-Selected"); $contents.eq(index).slideDown().siblings().slideUp(); }) $(".tab-TabSpan").mouseover(function(){ $(this).addClass("tab-TabSpan-Hover").siblings().removeClass("tab-TabSpan-Hover");})$(".tab-TabSpan").mouseout(function(){ $(this).removeClass("tab-TabSpan-Hover");}) $tabSpans.eq(0).click(); })</SCRIPT>