刚刚写的一个简单的JQuery动态选项卡

刚写的一个简单的JQuery动态选项卡

HTML:

 

<div class="tab-Main">
    <div class="tab-ControlPanel">
		<div class="tab-TabSpan">标题1</div>
		<div class="tab-TabSpan">标题2</div>
		<div class="tab-TabSpan">标题3</div>
     </div>
    <div class="tab-Container">
	    <div class="tab-Content">内容111</div>
	    <div class="tab-Content">222内容</div>
	    <div class="tab-Content">3内容33</div>
    </div>
</div>

 

样式：

 

<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>