编程 Javascript

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优化技巧（文件瘦身篇）

Jan 28 Javascript

js 上传图片预览问题

Dec 06 Javascript

商城常用滚动的焦点图效果代码简单实用

Mar 28 Javascript

javascript实现playfair和hill密码算法

Dec 07 Javascript

node.js中的path.isAbsolute方法使用说明

Dec 08 Javascript

JavaScript生成福利彩票双色球号码

May 15 Javascript

JQuery中Text方法用法实例分析

May 18 Javascript

JavaScript基本语法讲解

Jun 03 Javascript

js实现图片上传并正常显示

Dec 19 Javascript

jQuery 获取遍历获取table中每一个tr中的第一个td的方法

Oct 05 Javascript

jQuery实现验证码功能

Mar 17 Javascript

Angular 2.0+ 的数据绑定的实现示例

Aug 09 Javascript

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

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

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