jQuery之选项卡的简单实现


Posted in Javascript onFebruary 28, 2014

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

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

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

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

这一次,我自己写了代码,先看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>

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

css部分:

*{
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的动作:
<script type='text/javascript'>
$(function(){
    //1.点击时改变css属性,移除之前的selected选项,添加新的selected选项
    //2.隐藏之前的div层,显示对应得div层
    //为导航中的li注册点击事件
    var $div_li = $(".tab_menu ul li");
    $div_li.click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
        //var index = $div_li.index(this);
        //$("div.tab_box > div").eq(index).show().siblings().hide();
        var text = $(this).text();
        if(text=='时事')
        {
            $('.tab_box div:contains("时事")').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='体育')
        {
            $('.tab_box div:contains("体育")').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='娱乐')
        {
            $('.tab_box div:contains("娱乐")').removeClass('hide').siblings().addClass('hide');
        }
    }).hover(function(){
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");
        });
});
</script>

这是我写的jQuery代码,我的思路是,点击选项卡时,添加selected样式,同时移除兄弟选项卡的selected样式。

再一个,如何才能触发相应的tab_box中的内容的隐藏与显示呢?

我发现了他们有相对应的内容,就是选项头为“实事”的对应的选项体也为“实事”,选项头为“体育”的对应的选项提也为“体育”等。

我就想,先获取选项头的内容,做出判断,当它为不同的值时,就触发不同的效果。

效果是实现了,可是漏洞很明显,因为并不是所有的选项卡都是标题与内容体相对应。

再看看下面的代码:

<script type="text/javascript" >
//<![CDATA[
    $(function(){
        var $div_li =$("div.tab_menu ul li");
        $div_li.click(function(){
            $(this).addClass("selected")            //当前<li>元素高亮
                   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
            $("div.tab_box > div")       //选取子节点。不选取子节点的话,会引起错误。如果里面还有div 
                    .eq(index).show()   //显示 <li>元素对应的<div>元素
                    .siblings().hide(); //隐藏其它几个同辈的<div>元素
        })
    })
//]]>
</script>

这里的处理就特别的巧妙,它通过获取li的索引,对选项体进行处理。它巧妙的利用了一个隐藏的对应关系,就是索引值。

这样即便选项头与选项体内容不对应,一样可以实现联动效果。

通过这次练习,我觉得,自己先动脑子想一想还是很好的。可以发现思路的差异,才能够发现不足,知道差距。有时候甚至你的思路会更好呢!

Javascript 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 #Javascript
flash遮住div问题的正确解决方法
Feb 27 #Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 #Javascript
js中settimeout方法加参数的使用实例
Feb 27 #Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 #Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 #Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 #Javascript
You might like
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
政府采购方案
2014/06/12 职场文书
交通安全月活动总结
2015/05/08 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers