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 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 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 代码优化的42条建议 推荐
2009/09/25 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php rsa加密解密使用详解
2015/01/14 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
前端必学之PHP语法基础
2016/01/01 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
使用python解析xml成对应的html示例分享
2014/04/02 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
暑期教师培训方案
2014/06/07 职场文书
关于长城的导游词
2015/01/30 职场文书
教师个人学习总结
2015/02/11 职场文书
法制主题班会教案
2015/08/13 职场文书
创业计划书之酒店
2019/08/30 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers