php 实现tab切换_jQuery最简洁实现tab选项切换

这次给大家带来jQuery最简洁实现tab选项切换，jQuery实现tab选项切换的注意事项有哪些，下面就是实战案例，一起来看一下。

效果图：

代码：

简单的tab效果

* {

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;

}

$(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);

• 国事
• 军情
• 图片

国事

军情

图片

• 国事
• 军情
• 图片

国事

军情

图片

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：