jQuery简单实现网页选项卡特效


Posted in Javascript onNovember 24, 2014

CSS:

        .clear{clear:both; height:0px; overflow:hidden;} 

        .tab{width:400px; font-size:12px;} 

        .tab_menu ul{padding:0px;margin:0px;} 

        .tab_menu li{list-style:none; display:block; float:left; 

            background:#C2CEFE; height:22px; line-height:22px; 

            padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid; 

        } 

        .box{width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; } 

        .tab_menu ul li.selected{background:#dadada; cursor:pointer; } 

        .hide{display:none;}

jQuery:

        $(function() { 

            var $menu_li = $("div.tab_menu ul li");  //选取网页选项卡 

            $menu_li.click(function(){ 

                $(this).addClass("selected") //当前<li>高亮 

                        .siblings().removeClass("selected"); //去掉其它同辈<li>的高亮 

                var index = $menu_li.index( $(this) ); //找到<li>子节点的索引 

                $("div.tab_box > div").eq(index).show() //索引为N的DIV显示出来 

                        .siblings().hide();            //其它的选项卡隐藏 

            }) 

        }) 

html:

 <div class="tab"> 

    <div class="tab_menu"> 

        <ul> 

            <li class="selected">个人信息</li> 

            <li class="selected">我的照片</li> 

            <li class="selected">我的博客</li> 

            <div class="clear"></div> 

        </ul> 

    </div> 

    <div class="tab_box"> 

        <div class="box">我的QQ:123456</div> 

        <div class="box hide">hi </div> 

        <div class="box hide"> hello <br> </div> 

    </div> 

</div>
Javascript 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
jQuery实现大图轮播
Feb 13 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
jQuery选择器全集详解
Nov 24 #Javascript
常见的jQuery选择器汇总
Nov 24 #Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 #Javascript
Javascript学习笔记之数组的构造函数
Nov 23 #Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 #Javascript
Javascript 赋值机制详解
Nov 23 #Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 #Javascript
You might like
如何利用php+mysql保存和输出文件
2006/10/09 PHP
福利彩票幸运号码自动生成器
2006/10/09 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
使用js画图之饼图
2015/01/12 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
python实现将一个数组逆序输出的方法
2018/06/25 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
联想中国官方商城:Lenovo China
2017/10/18 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
Eclipse面试题
2014/03/22 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
数控专业大学生的自我鉴定
2013/11/13 职场文书
房产销售经理职责
2013/12/20 职场文书
初中家长寄语
2014/04/02 职场文书
建筑安全生产责任书
2014/07/22 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
校园安全教育心得体会
2016/01/15 职场文书
护士心得体会范文
2016/01/25 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android