jQuery最简洁实现tab选项切换

来源：动视网责编：小采时间：2020-11-27 19:51:48

jQuery最简洁实现tab选项切换

jQuery最简洁实现tab选项切换:这次给大家带来jQuery最简洁实现tab选项切换，jQuery实现tab选项切换的注意事项有哪些，下面就是实战案例，一起来看一下。效果图：代码：<!DOCTYPE html> <html> <head> <meta http-equiv="Conte

推荐度：

点击下载本文 文档为doc格式

导读jQuery最简洁实现tab选项切换:这次给大家带来jQuery最简洁实现tab选项切换，jQuery实现tab选项切换的注意事项有哪些，下面就是实战案例，一起来看一下。效果图：代码：<!DOCTYPE html> <html> <head> <meta http-equiv="Conte

这次给大家带来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最简洁实现tab选项切换

推荐度：

点击下载本文 文档为doc格式

标签：切换简单选项

热门焦点

jQuery最简洁实现tab选项切换

jQuery最简洁实现tab选项切换

jQuery最简洁实现tab选项切换

最新推荐

猜你喜欢

热门推荐