jquery tab切换 

<body>
           <div class="dwcontainer">
                <ul class="tabs">
                    <li class="active" style="padding: 0px;"><a href="#tab1" class="index_rank_head">总价地王排行榜</a></li>
                    <li style="padding: 0px;"><a href="#tab4" class="index_rank_head">单价地王排行榜</a></li>
                </ul>
                <div class="tab_container">
                    <div id="tab1" class="tab_content" style="display: block;">
                        <div>
                          11
                        </div>
                    </div>
                    <div id="tab4" class="tab_content" style="display: none;">
                        <div>
                        22
                        </div>
                    </div>
                </div>
            </div>
    </body>
    <style>
            
            .dwcontainer {
                width: 500px;
                margin: 0 auto;
            }

            .dwcontainer ul.tabs {
                margin: 0;
                padding: 0;
                float: left;
                list-style: none;
                height: 32px;
                border-bottom: 1px solid #fff;
                border-left: 1px solid #fff;
                width: 100%;
            }

            .dwcontainer ul.tabs li {
                float: left;
                margin: 0;
                padding: 0;
                height: 31px;
                line-height: 31px;
                border: 1px solid #fff;
                border-left: none;
                margin-bottom: -1px;
                background: #e0e0e0;
                overflow: hidden;
                position: relative;
            }

            .dwcontainer ul.tabs li a {
                text-decoration: none;
                color: #000;
                display: block;
                font-size: 1.2em;
                padding: 0 10px;
                border: 1px solid #fff;
                outline: none;
            }

            .dwcontainer ul.tabs li a:hover {
                background: #ccc;
                color: red;
            }

            .dwcontainer ul.tabs li.active, html ul.tabs li.active a:hover {
                background: #fff;
                border-bottom: 1px solid #fff;
                color: red;
            }

            .dwcontainer .tab_container {
                border: 1px solid #fff;
                border-top: none;
                clear: both;
                float: left;
                background: #fff;
                -moz-border-radius-bottomright: 5px;
                -khtml-border-radius-bottomright: 5px;
                -webkit-border-bottom-right-radius: 5px;
                -moz-border-radius-bottomleft: 5px;
                -khtml-border-radius-bottomleft: 5px;
                -webkit-border-bottom-left-radius: 5px;
            }

            .dwcontainer .tab_content {
                padding: 10px;
                font-size: 1.2em;
            }

            .dwcontainer .tab_content h2 {
                font-weight: normal;
                padding-bottom: 10px;
                border-bottom: 1px dashed #ddd;
                font-size: 1.8em;
            }

            .dwcontainer .tab_content h3 a {
                color: #254588;
            }
        </style>

封装的切换框架的js

tabchange.js

(function(){
    if(!window.project){
        window.project={}
    }
    
    window.project={
        change:function(){            
              //Default Action  
            $(".tab_content").hide(); //Hide all content  
            $("ul.tabs li:first").addClass("active").show(); //Activate first tab  
            $(".tab_content:first").show(); //Show first tab content  

            //On Click Event  
            $("ul.tabs li").click(function () {
                $("ul.tabs li").removeClass("active"); //Remove any "active" class  
                $(this).addClass("active"); //Add "active" class to selected tab  
                $(".tab_content").hide(); //Hide all tab content  
                var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content  
                $(activeTab).fadeIn(); //Fade in the active content  
                return false;
            });
            
        }
    }
})();

页面调用

<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
        <script type="text/javascript" src="js/tabchange.js" ></script>
        <script>
          $(function(){        
           project.change();
          })

 

posted on 2016-07-26 13:10  lihfei89  阅读(178)  评论(0)  编辑  收藏  举报

导航