Jquery 实现Tab效果 思路是js思路
发布时间：2013-08-26 编辑：jiaochengji.com
Jquery 实现Tab效果，思路就是普通的用js的思路控制的，脚本之家发布过更精简的代码，这个比较适合一直用js开始学用jquery控制的朋友一个参考。
jquery 实现Tab效果，思路就是普通的用js的思路控制的，脚本之家发布过更精简的代码，这个比较适合一直用js开始学用jquery控制的朋友一个参考。
<!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.jb51.net/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>www.jb51.net</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.jb51.net/js/jquery_tab/index.htm
复制代码 代码如下:
<!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.jb51.net/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>www.jb51.net</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.jb51.net/js/jquery_tab/index.htm
您可能感兴趣的文章：
Jquery 实现Tab效果 思路是js思路
用jQuery打造TabPanel效果代码
纯CSS实现Tab页切换效果
基于jquery tab切换(防止页面刷新)
Jquery tab选项卡的实现代码
使用jquery实现div的tab切换实例代码
jquery的index方法实现tab效果
photoshop婚礼记实类照片调色教程
jquery Tab效果和动态加载的简单实例
jQuery UI 应用不同Theme的办法
[关闭]