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 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
JS作用域深度解析
Dec 29 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
用vite搭建vue3应用的实现方法
Feb 22 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&amp;&amp;mysql)二
2006/10/09 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
javascript引用对象的方法
2007/01/11 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python计算一个文件里字数的方法
2015/06/15 Python
python提取字典key列表的方法
2015/07/11 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
tensorflow之并行读入数据详解
2020/02/05 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
信息技术专业个人自我评价
2013/12/11 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
深入理解python协程
2021/06/15 Python
vue的项目如何打包上线
2022/04/13 Vue.js