H-ui框架制作選項卡

本案例運用H-ui框架，寫了一個選項卡案例

1. html代碼（固定這樣寫，用一個div包裹控制條tabBar和內容條tabCon）

<div id="tab-index-cartegory">
    <div class="tabBar">
        <span class="selected">類型</span>
        <span>風格</span>
    </div>
    <div class="tabCon" style="display: block;">
        <div>
            <ul>
                <li>
                    <a href="#" target="_blank">宋體</a>
                </li>
                <li>
                    <a href="#" target="_blank">楷體</a>
                </li>
                <li>
                    <a href="#" target="_blank">行書</a>
                </li>
                <li>
                    <a href="#" target="_blank">黑體</a>
                </li>
                <li>
                    <a href="#" target="_blank">隸書</a>
                </li>
                <li>
                    <a href="#" target="_blank">草書</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tabCon" style="display: none;">
        <div>
            <ul>
                <li>
                    <a href="#" target="_blank">流行</a>
                </li>
                <li>
                    <a href="#" target="_blank">舞曲</a>
                </li>
                <li>
                    <a href="#" target="_blank">嘻哈饒舌樂</a>
                </li>
                <li>
                    <a href="#" target="_blank">世界/國際</a>
                </li>
                <li>
                    <a href="#" target="_blank">雷蓋/斯卡</a>
                </li>
                <li>
                    <a href="#" target="_blank">爵士</a>
                </li>
            </ul>
        </div>
    </div>
</div>

2. CSS樣式（根據自己需要書寫樣式即可）

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #tab-index-cartegory{
            width: 1280px;
            margin: 0 auto;
        }
        #tab-index-cartegory .tabBar{
            height: 60px;
            line-height: 60px;
            background: #666666;
        }
        #tab-index-cartegory .tabBar span{
            display: inline-block;
            font-size: 16px;
            padding: 0 20px;
            color: #ffffff;
            height: 58px;
            line-height: 58px;
            border-top: 0;
            cursor: pointer;
        }
        #tab-index-cartegory .tabBar span.selected{
            color: #F4523B;
        }

        ul li{
            list-style: none;
            float: left

        }
        ul li a{
            text-decoration: none;
            display: block;
            width: 100px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
        }
    </style>

 

3. 引入需要的js代碼

首先引入jquery

<script src="jquery.min.js"></script>

接下來引入H-ui.js

<script src="H-ui.js"></script>

 

如果不引入H-ui.js，可以直接將用到的方法復制出來

jQuery.HUItab =function(tabBar,tabCon,class_name,tabEvent,i){
        var $tab_menu=$(tabBar);
        // 初始化操作
        $tab_menu.removeClass(class_name);
        $(tabBar).eq(i).addClass(class_name);
        $(tabCon).hide();
        $(tabCon).eq(i).show();

        $tab_menu.bind(tabEvent,function(){
            $tab_menu.removeClass(class_name);
            $(this).addClass(class_name);
            var index=$tab_menu.index(this);
            $(tabCon).hide();
            $(tabCon).eq(index).show();
        });
    }

4. 書寫js代碼

$(function () {
     $.HUItab("#tab-index-cartegory .tabBar span","#tab-index-cartegory .tabCon","selected","click","0")
})
// #tab-index-cartegory 父級id
// #tab-index-cartegory .tabBar span 控制條
// #tab-index-cartegory .tabCon 內容區
// click 事件 點擊切換，可以換成mousemove 移動鼠標切換
// 0    默認第1個tab為當前狀態（從0開始）

注意：若使用的H-ui.js為3.1之后的版本，則應使用如下js代碼：

$(function () {
     $("#tab-index-cartegory").Huitab(0)
})
//Huitab()中的參數為默認選中第幾個tabCon,tabBar
//注意：3.1以后定義如下，所以如果你的類名不是這樣命名的，則需要修改默認值
//var defaults = {
    //tabBar:'.tabBar span',
    //tabCon:".tabCon",
    //className:"current",
    //tabEvent:"click",
    //index:0,
//}