如何用jquery实现tab切换
发布网友
共2个回答
懂视网
这次给大家带来jQuery最简洁实现tab选项切换，jQuery实现tab选项切换的注意事项有哪些，下面就是实战案例，一起来看一下。
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script>
<title>简单的tab效果</title>
<style type="text/css">
* {
padding: 0px;
margin:0px
}
body {
text-align: center
}
.wrap ul {
overflow: hidden
}
.wrap li {
float: left;
list-style: none;
margin-right: 10px;
cursor: pointer;
padding: 2px 5px
}
.link {
cursor: pointer;
color: #F00
}
.wrap {
width: 200px;
margin: 50px auto
}
.wrap, .ellipsis {
font-size: 12px;
width: 200px;
}
.tab_p p {
display: none;
padding: 10px;
}
.tab_p {
text-align: left;
border: 1px #CCC solid;
height: 200px;
clear: both
}
.cur {
background: #060;
color: #FFF
}
#setTab_2{
margin-top: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//tab
$("#setTab").setTab();
$("#setTab_2").setTab();
});
/*插件代码*/
(function ($) {
$.fn.setTab = function () {
var getTab=$(this),//this指向调用函数的ID
panels = getTab.children("p.tab_p").children("p"),
tabs = getTab.find("li");
return this.each(function(){
$(tabs).click(function(e) {
var index = $.inArray(this, $(this).parent().find("li"));//this指向li
if (panels.eq(index)[0]) {
$(tabs).removeClass("cur");
$(this).addClass("cur");
panels.css("display", "none").eq(index).css("display", "block");
}
});
});
}
})(jQuery);
</script>
</head>
<body class="wrap">
<p id="setTab">
<ul class="tab_nav">
<li class="cur">国事</li>
<li>军情</li>
<li>图片</li>
</ul>
<p class="tab_p">
<p style="display: block">国事</p>
<p>军情</p>
<p>图片</p>
</p>
</p>
<p id="setTab_2">
<ul class="tab_nav">
<li>国事</li>
<li class="cur">军情</li>
<li>图片</li>
</ul>
<p class="tab_p">
<p>国事</p>
<p style="display: block">军情</p>
<p>图片</p>
</p>
</p>
</body>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
jquery实现元素拖动排序（附代码）
jQuery+CSS实现标签分栏切换（附代码）
热心网友
<style>
.box{width:300px;height:300px;}
.box span{display:block;float:left;width:100px;height:30px;text-align:center;line-height:30px;}
.box ul{width:300px;}
.box ul li{display:none;}
</style>
<div class="box">
<span>第1个</span><span>第2个</span><span>第3个</span>
<ul>
<li>显示第一个</li>
<li>显示第二个</li>
<li>显示第三个</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".box ul li").eq(0).show();
$(".box span").click(function(){
var ind = $(".box span").index(this);
$(".box ul li").hide();
$(".box ul li").eq(ind).show();
})
})
</script>
