首页 > php mysql > jquery 实现选项卡效果

jquery 实现选项卡效果

2011年2月18日

再用 jquery 实现一个 tab 页选项卡的效果。一种方式是融合背景,另一种方式是融合边框。

要点:

— 使用 each 为每个选项卡( <li> )添加 onmouseover 或者onclick 事件

— 使用 list-style 去掉他相关个 <li> 的项目符号

— 使用 clear: left 去除 <li> 浮动到 <div>左边

— 结合 z-index ,position:relative , top:-1px 让<li>浮于 div 上,盖住选项卡与div重合的边框

CSS文件:

/*背景融合的标签页样式*/
#tabBackground
{
margin: 0;
padding: 0;
list-style: none; /*去掉前面的 项目符号*/
}
#tabBackground li
{
background-color: #D3E0F2;
color: #15428B;
font-weight: bold;
float: left;
padding: 1px; /*让字与 li 留空白*/
margin-right: 2px; /*每个 li 的右边留空白*/
border: 2px solid white;
cursor: pointer;
}

#tabBackground li.tabBackgroundActive
{
background-color: #DEECFD;
border: 2px solid #DEECFD;
}

div.divBackground
{
width: 300px;
height: 200px;
background-color: #DEECFD;
clear: left; /*去除 li浮动到 div 左边*/
display: none;
}
/*边框融拿的标签页样式*/
#tabBorder
{
margin: 0;
padding: 0;
list-style: none;
}

#tabBorder li
{
float: left;
background-color: White;
padding: 2px;
margin-right:5px;
cursor:pointer;
}

#tabBorder li.tabBorderActive
{
border: 1px solid blue;
border-bottom-style: none;
z-index: 99; /*让tab浮于 div 上面,以盖住 div*/
position: relative;
}

div.divBorder
{
width: 300px;
height: 200px;
background-color: lightyellow;
border: 1px solid blue;
clear: left; /*去除 li浮动到 div 左边*/
padding: 2px;
display: none;
top: -1px; /*往上移动一个像素,刚好让 tab下边缘盖住 div 的边框,以不显示出边框*/
position: relative; /*没有 position 为 absolute 或者 relative 则 z-index 的使用不会有效果,且 tab 上也要加 position*/
}

/*注意,这个样式,两种方式的 tab 都使用到了,必须放在最下面*/
/*否则 divBorder 中的 display:none 将替代该处的 显示*/
div.divContentActive
{
display: block;
}

html 文件:一组 <ul> 、<li> 及 <div> 来交替显示

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title></title>
<link href=”style/tab.css” rel=”stylesheet” />

<script src=”script/jquery-1.4.2.js”line-height: 22px; “>cript”></script>

<scriptline-height: 22px; “>cript”line-height: 22px; “>cript”>
//融合背景效果

$(document).ready(function() {
$(“#tabBackground li”).each(function(index) { //index 表示循环时,<li>对应的下标
$(this).mouseover(function() {
var liHeader = $(this);
//清除当前选中 div 的  divContentActive 样式
$(“div.divBackground.divContentActive”).removeClass(“divContentActive”);
//清除当前选中 li 的 tabBackgroundActive 样式
$(“#tabBackground li.tabBackgroundActive”).removeClass(“tabBackgroundActive”);

//添加当前鼠标移动到的 li 的样式 及要显示的 div 样式
liHeader.addClass(“tabBackgroundActive”);
$(“div.divBackground:eq(” + index + “)”).addClass(“divContentActive”);
});
});
});

//融合边框的效果

$(document).ready(function() {
$(“#tabBorder li”).each(function(index) {
$(this).click(function() {
var liHeader = $(this);
$(“#tabBorder li.tabBorderActive”).removeClass(“tabBorderActive”);
$(“div.divBorder.divContentActive”).removeClass(“divContentActive”);
liHeader.addClass(“tabBorderActive”);
$(“div.divBorder:eq(” + index + “)”).addClass(“divContentActive”);
});
});
});
</script>

</head>
<body>
<!–使背景融合–>
<ul>
<li>tab A</li>
<li>tab B</li>
<li>tab C</li>
</ul>
<div>
content A (background )
</div>
<div>
content B (background )
</div>
<div>
content C (background )
</div>
<br />
<br />
<br />
<!–使边框融合–>
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
<div>
content 1 (border)
</div>
<div>
content 2 (border)
</div>
<div>
content 3 (border)
</div>
</body>
</html>

firefox & IE8 效果图片:

(firefox 页面默认效果)

(firefox 中鼠标移动到 tab B 及点击 tab 3 )

(IE8 页面默认效果)

(IE8 中鼠标移动到 tab C 及点击 tab 2 效果)

php mysql , , 浏览3 次

本文的评论功能被关闭了.