jQuery之选项卡的简单实现

作者:联系我们

HTML代码 复制代码 代码如下:

jQuery实现选项卡功能。首先将界面搭建好。

1

有导航头tab_menu,还有内容tab_box。

2

要实现的效果就是,点击后,将相应的内容显示出来,其他内容隐藏掉。

3

同时为了展现选中状态,为选中的项添加背景,以示区别。

第一个

这一次,我自己写了代码,先看html部分:

第二个

复制代码 代码如下:

第三个

<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">时事</li>
            <li>体育</li>
            <li>娱乐</li>
        </ul>
    </div>
    <div class="tab_box">
         <div>时事</div>
         <div class="hide">体育</div>
         <div class="hide">娱乐</div>
    </div>
</div>

Jquery 复制代码 代码如下: $().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',selectedClass:'selected',hoverClass:'hover'}); jquery.PPXTabs.js代码复制代码 代码如下:/*================================================================ *Copyright 2009 PPX *邮箱:Mr.cuix@Gmail.com *原始版本作者:PPX 创建时间:2010-2-8 10:20 *================================================================ *参数说明 *导航列 *导航内容 *选中时的样式 *经过时的样式 * *默认为 *$().PPXTabs({ nav:'.news_title1 li', nav_txt:'.news_list_box div', selectedClass:'tab_1_A', hoverClass:'tab_1_B' }); =================================== Demo -----

html中,需要一个大的div,里面有两个子div,一个作为导航头tab_menu,一个作为内容体tab_box。css代码负责布局html内容。

1

css部分:

2

复制代码 代码如下:

3

*{
margin:0;
padding:0;
}
.tab{
    width:240px;
    margin:50px;
    /*border:1px solid;*/
}
.tab_menu{
    clear:both;
}
.tab_menu li{
    float:left;  //将导航头左飘
    text-align:center;  //将文字居中
    list-style:none;  //去除标记符号
    background:#F1F1F1; //设置默认背景色
    border:1px solid #898989; //设置边框色
    margin-right:4px; //每个li之间的距离为4px
    cursor:pointer;  //鼠标浮上之后,会有小手的标示出现
    padding:1px 6px; //控制li的内部距离
    border-bottom:none;

第一个

}
.tab_menu li.hover{
    background:#DFDFDF;
}
.tab_menu li.selected{//为选中的选项加背景与颜色
    color:#FFF;
    background:#6D84B4;
}
.tab_box{
    clear:both; //清楚float效果的影响
    height:100px; //设置高度为100px
    border:1px solid #898989; //设置内容体的边框样式
}
.hide{//隐藏需要隐藏的内容div
    display:none;
}

第二个

待布局完成之后,进行jQuery的动作:

第三个

复制代码 代码如下:

本文由杏彩发布,转载请注明来源

关键词: