用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 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
js 自动播放的实例代码
Nov 19 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
JavaScript中import用法总结
Jan 20 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
第九节 绑定 [9]
2006/10/09 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
js传值 判断
2006/10/26 Javascript
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
js实现图片轮播效果学习笔记
2017/07/26 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
深入解析Python中的urllib2模块
2015/11/13 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
python操作excel让工作自动化
2019/08/09 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
渡河少年教学反思
2014/02/12 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书