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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
javascript高亮效果的二种实现方法
Sep 14 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
Vue如何清空对象
Mar 03 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
PHP 类型转换函数intval
2009/06/20 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python实现包含min函数的栈
2016/04/29 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
大学生创业策划书
2014/02/02 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
公司合并协议书范本
2014/09/30 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
商务信函英语问候语
2015/11/10 职场文书
小学大队委竞选口号
2015/12/25 职场文书
《游戏公平》教学反思
2016/02/20 职场文书