用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防止重复执行动画避免页面混乱
Apr 22 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
angular之ng-template模板加载
Nov 09 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
JS数组的常用10种方法详解
May 08 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 Javascript
浅谈Web Storage API的使用
Jun 23 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获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
tagName的使用,留一笔
2006/06/26 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
vue使用echarts画组织结构图
2021/02/06 Vue.js
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python 字符串定义
2009/09/25 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
Python笔记之观察者模式
2019/11/20 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
python matlab库简单用法讲解
2020/12/31 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
运动会表扬稿大全
2014/01/16 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
Java实现多线程聊天室
2021/06/26 Java/Android