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自动打开页面上链接的实现代码
Sep 25 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
Javascript事件实例详解
Nov 06 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 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
短波的认识
2021/03/01 无线电
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
Web程序工作原理详解
2014/12/25 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
js滚动条回到顶部的代码
2011/12/06 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
拖动时防止选中
2017/02/03 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
用实例解释Python中的继承和多态的概念
2015/04/27 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
Python中的枚举类型示例介绍
2019/01/09 Python
python获取引用对象的个数方式
2019/12/20 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
应届毕业生自荐书
2014/06/18 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
党支部三会一课计划
2014/09/24 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
详解Vue3使用axios的配置教程
2022/04/29 Vue.js