选项卡

样式有点丑，将就看( ˘ ³˘)♥ ( ˘ ³˘) ，重要的是效果

---

直接上代码（简单粗暴）

---

css

.tab-contain{
    margin: 50px auto;
    width: 800px;
    padding:100px;
    background: #9D9D9D;}
.tabs {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;}
.tabs li {float: left; }
.tabs a {
    position: relative;
    background: #ddd;
    width: 400px;
    height: 50px;
    text-align: center;
    padding-top: 10px;
    float: left;
    color:red;
    border-radius: 20px 20px 0 0;
}
 .current a{
    background: #fff;
    z-index: 4;}
.hoverItem a{background: #AAC8B9;  /*移上去的颜色*/}
.content {
    background: #fff;
    height: 350px;
    padding-top: 30px;}
.item{display: none;}
.show{display: block;}

html

<div class="tab-contain">
    <!-- tab栏 -->
    <ul class="tabs">
        <li class="current">
            <a href="#" title="tab1">One</a>
        </li>
         <li>
            <a href="#" title="tab2">Two</a>
         </li>
    </ul>
    <!-- 对应显示内容 -->
    <div class="content">
        <div id="tab1" class="item show">
            <h2>内容1</h2>
        </div>
        <div id="tab2" class="item">
            <h2>内容2</h2>
        </div>
    </div>
</div>

js

<!-- 引入的文件 -->
    <script src="js/jquery.min.js"></script>    
    <script>  
     $(function(){
            $('.tabs a').click(function(e) {
                e.preventDefault();                
                $('.tabs li').removeClass("current").removeClass("hoverItem");
                $(this).parent().addClass("current");
                $(".content div").removeClass("show");
                $('#' + $(this).attr('title')).addClass('show');
            });
            $('.tabs a').hover(function(){
                if(!$(this).parent().hasClass("current")){
                    $(this).parent().addClass("hoverItem");
                }
            },function(){
                $(this).parent().removeClass("hoverItem");
            });
        });
  </script>  

( ｡￫ ‿￩｡ )