css实现tab切换标签

最新推荐文章于 2025-05-20 13:16:26 发布

atthemoment

最新推荐文章于 2025-05-20 13:16:26 发布

阅读量2.3k

点赞数

本文介绍了一个使用jQuery实现的Tab切换插件，通过自定义的JavaScript函数和CSS样式，实现了多个Tab之间的平滑切换效果。插件初始化时会遍历所有Tab头部元素，为它们绑定点击事件，当用户点击不同的Tab时，会隐藏当前显示的内容并展示所选Tab对应的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自 https://www.jb51.net/article/78799.htm

[code = css]
<head>
<title>tab切换</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" >
(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();
});
</script>
<style type="text/css" >
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; }
</style>
</head>
<body>
<pre>
<div id="tabContainer">
<ul class="tab_header_group">
<li class="tab_header"><a href="#tab1" >首页1</a></li>
<li class="tab_header"><a href="#tab2" >首页2</a></li>
<li class="tab_header active"><a href="#tab3" >首页3</a></li>
<li class="tab_header"><a href="#tab4" >首页4</a></li>
<li class="tab_header"><a href="#tab5" >首页5</a></li>
</ul>
<div class="tab_body_group">
<div id="tab1" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
tab1
</div>
<div id="tab2" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
tab2
</div>
<div id="tab3" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
tab3
</div>
<div id="tab4" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
tab4
</div>
<div id="tab5" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
tab5
</div>
</div>
</div>