<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,tab,标签切换,jQuery,JS图片特效,JS广告代码，JS常用代码" />
<meta name="description" content="jQuery实现的简单的tab标签栏切换效果，更多tab,标签切换,jQuery代码请访问JS代码频道。" />
<title>jQuery实现的简单的tab标签栏切换效果_</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#tabs {
font-size: 90%;
margin: 20px 0;
}
#tabs ul {
float: left;
background: #fff;
width: 500px;
padding-top: 4px;
}
#tabs li {
margin-left: 8px;
list-style: none;
}
* html #tabs li {
display: inline;
}
#tabs li, #tabs li a {
float: left;
}
#tabs ul li.active {
border-top:2px #FFFF66 solid;
background: #FFFFCC;
}
#tabs ul li.active a {
color: #333333;
}
#tabs div {
background: #FFFFCC;
clear: both;
padding: 15px;
min-height: 200px;
}
#tabs div h3 {
margin-bottom: 12px;
}
#tabs div p {
line-height: 150%;
}
#tabs ul li a {
text-decoration: none;
padding: 8px;
color: #000;
font-weight: bold;
}
.thumbs {
float:left;
border:#000 solid 1px;
margin-bottom:20px;
margin-right:20px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="tabs">
<ul>
<li><a href="#tab-1">This is Tab 1</a></li>
<li><a href="#tab-2">Tab Two</a></li>
<li><a href="#tab-3">Tab Three</a></li>
<li><a href="#tab-4">Tab Four</a></li>
</ul>
<div id="tab-1">
<h3>This is a really simple tabbed interface</h3>
<p><img src="http://papermashup.com/demos/jquery-gallery/images/t1.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat. <br/>
<a href="http://www.sharejs.com">JavaScript</a> </p>
</div>
<div id="tab-2">
<h3>Tab 2</h3>
<p><img src="http://papermashup.com/demos/jquery-gallery/images/t2.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec <br/>
<a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p>
</div>
<div id="tab-3">
<h3>Tab 3</h3>
<p><img src="http://papermashup.com/demos/jquery-gallery/images/t3.png" width="120" height="120" class="thumbs"/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio.<br/>
<a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p>
</div>
<div id="tab-4">
<h3>Tab 4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus.<br/>
<a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom">Subscribe to my feed here</a></p>
</div>
</div>
</div>
<div id="footer">
<br />
<a href="http://www.papermashup.com">papermashup.com</a> | <a href="http://papermashup.com/simple-jquery-tabs/">Back to tutorial</a></div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7025232-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<div style="text-align:center; clear:both; margin:5px auto">
<p>代码整理：<a href="http://www.jb51.net/" target="_blank">脚本之家</a> 更多相关效果，请到脚本之家 <a href="http://www.jb51.net/jiaoben/guanggao1.html" target="_blank">脚本下载</a>栏目</p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p><a href="http://sc.jb51.net" target="_blank">脚本之家素材中心</a>整理。</p>
<p><script src="/js/js-preview-728x90.js"></script><br /><br /><br /><center><script src="/js/tj.js"></script></center></p>
</div>
</body>
</html>
基于jQuery的简单的tab标签栏切换效果的实现代码.zip
版权申诉
116 浏览量
2022-11-10
00:24:08
上传
评论
收藏 6KB ZIP 举报
基于jQuery的简单的tab标签栏切换效果的实现代码.zip （3个子文件） 
132689930886190271 likecs.com_132689930888282282 
index.html 6KB about.html 2KB
index.html.bak 6KB资源评论
毕业_设计
- 粉丝: 1945
- 资源: 1万+
最新资源
- 通信仿真，mseed-process-master.zip
- python，python-quantum.rar
- python,python-project-euler.rar
- Linux常用命令及用法说明
- 基于Matlab的FFT频谱分析及IIR数字滤波器设计
- AutoCAD高压低压电气开关柜设备接线图图纸
- AutoCAD电气图纸建筑电气开关柜常用cad图纸
- 使用ASP.NET Core和Entity Framework Core来构建一个基本的进销存系统.rar
- 深度学习经典数据集+FER2013面部表情识别+附带使用方法的python代码
- Python中，要实现连接多个相机并识别多个二维码.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
