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 相关文章推荐
JScript的条件编译
May 29 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
深入理解javascript中的this
Feb 08 Javascript
分享一个vue实现的记事本功能案例
Apr 11 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生成带有雪花背景的验证码
2006/10/09 PHP
php表单敏感字符过滤类
2014/12/08 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
json2.js的初步学习与了解
2011/10/06 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
python k-近邻算法实例分享
2014/06/11 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python计算n的阶乘的方法代码
2019/10/25 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
2014年度安全工作总结
2014/12/04 职场文书
团员自我评价范文
2015/03/10 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL