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 相关文章推荐
javascript之可拖动的iframe效果代码
Aug 01 Javascript
js 操作符实例代码
Oct 24 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
vuex管理状态仓库使用详解
Jul 29 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中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
Vue渲染函数详解
2017/09/15 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
详解在Python程序中使用Cookie的教程
2015/04/30 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
八年级数学教学反思
2014/01/31 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
刑事案件上诉状
2015/05/23 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
Python实现双向链表
2022/05/25 Python