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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
jquery 按键盘上的enter事件
2014/05/11 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
vue.js表格分页示例
2016/10/18 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
python多进程实现进程间通信实例
2017/11/24 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Django中间件基础用法详解
2019/07/18 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
如何理解Python中包的引入
2020/05/29 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
三星美国官网:Samsung美国
2017/02/06 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
医院总经理职责
2013/12/26 职场文书
不假外出检讨书
2014/01/27 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
英文升职感谢信
2015/01/23 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
JavaScript组合继承详解
2021/11/07 Javascript
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python