用Juery网页选项卡实现代码


Posted in Javascript onJune 13, 2011

首先前台代码

<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:1511109272</div> 
<div class="box hide">hi </div> 
<div class="box hide"> hello <br> </div> 
</div> 
</div>

接着可以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") //索引为N的DIV显示出来 
.eq(index).show() 
.siblings().hide(); 
}) 
})

然后CCS样式可以设置一下
.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;}
Javascript 相关文章推荐
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
Javascript实现的StopWatch功能示例
Jun 13 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
读jQuery之三(构建选择器)
Jun 11 #Javascript
读jQuery之二(两种扩展)
Jun 11 #Javascript
读jQuery之一(对象的组成)
Jun 11 #Javascript
基于jquery的无刷新分页技术
Jun 11 #Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 #Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 #Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 #Javascript
You might like
PHP数字格式化
2006/12/06 PHP
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
PHP Mysql编程之高级技巧
2008/08/27 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
网吧最新创业计划书范文
2014/03/27 职场文书
《开国大典》教学反思
2016/02/16 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
Java spring单点登录系统
2021/09/04 Java/Android
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸