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,
//}