css jquery 选项卡,jQuery+css实现的tab切换标签(兼容各浏览器)

本文实例讲述了jQuery+css实现的tab切换标签。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

tab切换

(function ($) {

function set_active(tab, isActive, mode) {

if (!tab) return;

if (!isActive) {

tab.removeClass('active');

if (mode == "header") {

var related_body = $(tab.find('a').attr('tab_body'));

set_active(related_body, false, "body");

}

} else {

tab.addClass('active');

if (mode == "header") {

var related_body = $(tab.find('a').attr('tab_body'));

set_active(related_body, true, "body");

}

}

}

function change_active(self_$_obj) {

var _self_tab_header = self_$_obj.parent();

var prev_active_tab_header = _self_tab_header.parent().find('.active');

set_active(prev_active_tab_header, false, "header");

set_active(_self_tab_header, true, "header");

}

function init(self) {

if (self.tab_header_length <= 0) { return; }

var defaut_active_tab_header = null;

for (var i = 0, length = self.tab_header_length; i < length; i++) {

var tab_header = $(self.tab_header_array[i]);

var tab_header_linker = tab_header.find('a');

tab_header_linker.attr("tab_body", tab_header_linker.attr("href"));

tab_header_linker.removeAttr("href");

tab_header_linker.bind("click", function () {

change_active($(this));

});

if (tab_header.hasClass('active')) {

defaut_active_tab_header = tab_header;

}

}

if (defaut_active_tab_header) {

change_active($(defaut_active_tab_header.find('a')));

} else {

change_active($(self.tab_header_array[0].find(a)));

}

}

$.fn.c_tab = function () {

var _self = $(this);

_self.tab_header_group = _self.find('.tab_header_group');

_self.tab_header_array = _self.tab_header_group.find('.tab_header');

_self.tab_header_length = _self.tab_header_array.length;

if (_self.tab_header_length == 0) {

return;

}

init(_self);

}

})($);

$(document).ready(function () {

$("#tabContainer").c_tab();

});

body { margin:0; padding:0; background:#DFEFFF; }

#tabContainer { width:500px; height:300px; margin-left:200px; margin-top:50px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; }

.tab_header_group { color:Green; z-index:10; background:#DDDDDD url('img/navbg1.jpg'); width:100%; padding:0; margin:0; border-bottom:1px solid gray; border-radius:4px 4px 0 0;}

.tab_header { line-height:30px; font-size:14px; display:inline-block; cursor:pointer; margin-right:-3px; *display:inline; zoom:1; padding-left:10px; padding-right:10px; border-radius:4px 4px 0 0; }

.tab_header a,a:hover { text-decoration:none; }

.tab_header:hover { background:#F5F5F5; }

.tab_header_group .active { margin-bottom:0px; background:gray; color:#fff; }

.tab_body { margin-top:1px; display:none; }

.tab_body_group .active { display:block; }

• 首页1
• 首页2
• 首页3
• 首页4
• 首页5

tab1

tab2

tab3

tab4

tab5

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。