刚写的一个简单的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>