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:;

            padding:;

        }

        #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:;

            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,

//}

巴特西

H-ui框架制作选项卡

最新文章

热门文章