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 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
js制作提示框插件
Dec 24 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
总结js函数相关知识点
2018/02/27 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
python Django批量导入不重复数据
2016/03/25 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
Python代码太长换行的实现
2019/07/05 Python
python判断是空的实例分享
2020/07/06 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
社区庆中秋节活动方案
2014/02/07 职场文书
大学老师推荐信
2014/02/25 职场文书
个人委托书怎么写
2014/04/04 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
课外活动实习计划
2015/01/19 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
opencv检测动态物体的实现
2021/07/21 Python
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js