代码精炼的炫酷选项卡

效果图：

html:

 <div class="widget">
         	<ul class="tab_links">
            	<li class="active"><a href="#first">first</a></li>
                <li><a href="#second">second</a></li>
                <li><a href="#third">third</a></li>
            </ul>
            <div id="first">
            	<ul>
                	<li>
                    	<img src="images/calrousel1.jpg" />
                    	<h3>first</h3>
                        <p>胜多负少的v深v</p>
                    </li>
                    <li>
                    	<img src="images/calrousel2.jpg" />
                    	<h3>first</h3>
                        <p>胜多负少的v深v</p>
                    </li>
                    <li>
                    	<img src="images/calrousel3.jpg" />
                    	<h3>first</h3>
                        <p>胜多负少的v深v</p>
                    </li>
                </ul>
            </div>
             <div id="second">
            	<ul>
                	<li>
                    	<h3>second</h3>
                        <p>是的v胜多负少长度</p>
                    </li>
                    <li>
                    	<h3>second</h3>
                        <p>山东各位感叹号</p>
                    </li>
                    <li>
                    	<h3>second</h3>
                        <p>胜多负少的v深v</p>
                    </li>
                </ul>
            </div>
             <div id="third">
            	<ul>
                	<li>
                    	<h3>third</h3>
                        <p>裤腿是人工费你喝咖啡</p>
                    </li>
                    <li>
                    	<h3>third</h3>
                        <p>盛大富翁放弃吧</p>
                    </li>
                    <li>
                    	<h3>third</h3>
                        <p>胜多负少的v深v</p>
                    </li>
                </ul>
            </div>
            <div id="clear"></div>
         </div>
   

css:

.widget{ background:#FFF; border:1px #D00 solid;float:left; }
.tab_links{ width:330px; list-style-type:none;float:left;}
.tab_links li{ width:110px; background:#000; color:#FFF; float:left;}
.tab_links li a{ padding:10px 0px; text-align:center; display:block; width:100%; }
.tab_links .active{ background:#FFF; color:#333;}
.widget > div{ display:none; margin-top:10px;}
.widget > div ul{ padding:10px; }
.widget > div ul li{ padding:5px; line-height:2; font-size:12px; }
.widget > div ul li img { float:left; width:50px; height:50px; margin-right:10px;}

.widget > div ul{ list-style-type:none;}
.widget > #first{ display:block;]

jQuery:

$('document').ready(function(){
	$('.tab_links li').bind('click',function(){
		if(!$(this).hasClass('active')){
			var links =  $(this).children('a').attr('href');
			$(this).parent('ul').children('li').removeClass('active');
			$(this).addClass('active');
			$(this).parents('.widget').children('div').hide();
			$(links).fadeIn();
			return false;
		}	
	});	
});