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 相关文章推荐
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
javascript的数组和常用函数详解
May 09 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
JS实现数组删除指定元素功能示例
Jun 05 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中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
vue框架中props的typescript用法详解
2020/02/17 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python中property属性实例解析
2018/02/10 Python
Python能做什么
2020/06/02 Python
解决python对齐错误的方法
2020/07/16 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
法学专业个人求职信
2013/09/26 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
师范大学生求职信
2014/06/13 职场文书
工商局个人工作总结
2015/03/03 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
详解Python函数print用法
2021/06/18 Python
Django框架中视图的用法
2022/06/10 Python