Jquery 实现Tab效果 思路是js思路


Posted in Javascript onMarch 02, 2010
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="http://img.3water.com/jslib/jquery/jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
.tab 
{ 
background-color: #FAFAFA; 
margin: 5px 8px; 
padding: 5px 10px; 
} 
.tab p span 
{ 
background-color: #EFEFEF; 
border: 1px solid #CCCCCC; 
cursor: pointer; 
margin-right: 6px; 
padding: 2px 5px; 
} 
.tab p span.current 
{ 
background-color: #FAFAFA; 
border-bottom-color: #fafafa; 
} 
.tab p 
{ 
border-bottom: 1px solid #CCCCCC; 
font-weight: bold; 
padding: 0 10px 2px; 
} 
.tab li 
{ 
border-bottom: 1px dotted #CCCCCC; 
padding-bottom: 3px; 
margin: 5px 0; 
} 
.tab .mhot, .tab.allhot 
{ 
display: none; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
$(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式 
$(".tab ul:not(:first)").hide(); //隐藏其它的UL 
$(".tab span").mouseover(function() { 
$(".tab span").removeClass("current"); //去掉所有SPAN的样式 
$(this).addClass("current"); 
$(".tab ul").hide(); 
$("." + $(this).attr("id")).fadeIn('slow'); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="tab"> 
<p> 
<span id="tab1">tab1</span> <span id="tab2">tab2</span> <span id="tab3">tab3</span></p> 
<ul class="tab1"> 
<li>三水点靠木</li><li>3water.com</li><li>我和我</li></ul> 
<ul class="tab2"> 
<li>一花一世办</li><li>一草一天堂</li></ul> 
<ul class="tab3"> 
<li>阿里巴巴</li><li>阿里巴巴</li><li>一草一天堂</li><li>我和我的祖国</li><li>最爱的地方</li></ul> 
</div> 
</body> 
</html>

演示代码 http://demo.3water.com/js/jquery_tab/index.htm
Javascript 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
js如何打印object对象
Oct 16 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
jquery实现倒计时功能
Dec 28 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 #Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 #Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 #Javascript
Javascript 自定义类型方法小结
Mar 02 #Javascript
Javascript Cookie读写删除操作的函数
Mar 02 #Javascript
28个JS验证函数收集
Mar 02 #Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 #Javascript
You might like
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
两个php日期控制类实例
2014/12/09 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
判断用户是否在线的代码
2011/03/05 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
DOM 高级编程
2015/05/06 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
成教自我鉴定
2013/10/27 职场文书
办公室文秘岗位职责
2013/11/15 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
办公室个人总结
2015/02/28 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
Go 中的空白标识符下划线
2022/03/25 Golang