您的位置：首页 > Web前端 > JQuery

Div+CSS+JQuery轻松实现选项卡"选项卡"

2010-04-21 19:50 495 查看

仅对今天下午没有虚度的两小时做一简单的总结:

1:有如下两个div,样式分别如下:

<div style="float:left">a</div>

<div style="float:left">b</div>

<div>c</div>

,则在显示到页面的效果是"abc",即a\b\c均在同一行上显示,要想让C单独一行出来显示,设置样式clear=both就可以了:

<div style="float:left">a</div>

<div style="float:left">b</div>

<div style="clear:both">c</div>

2:css+div定位,通过设置bottom或者top的值,实现元素相对于其"应该在"的位置的偏移

3:jQuery选择器以及show(),hide()等方法,使得我们真正实现了"更少的代码做更多的事情"

根据以上几点,以下代码实现的是一个选项卡式操作:

先看演示:

body,div,ul{ padding:0; margin:0;}
#container{width:800px; margin:50px;}
.tab{ padding:0; margin:0; }
.tab li{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;}
.content{ float:none; padding-top:30px; border:solid 1px black; clear:both; }
.content div{ border-top:0px; height:60px;}
.tab_selected{ border-left:solid 1px black; background-color:#ffffff; border-right:solid 1px black; border-top:solid 1px black; border-bottom:0px; bottom:-1px; position:relative; z-index:1}
.tab_current{ text-decoration:underline;}

$(
function() {
$(".content div:gt(0)").hide();
$(".tab li").css("cursor", "pointer");
$(".tab li").hover(function() {
$(this).addClass("tab_current");
}, function() {
$(this).removeClass("tab_current");
}).click(
function() {
$(this).addClass("tab_selected").siblings().removeClass("tab_selected");
$(".content div").eq($(this).index()).siblings().hide().end().show();
}
)
}
);

选项卡A
选项卡B
选项卡C

内容一
内容二
内容三
代码如下:

代码

<!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>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body,div,ul{ padding:0; margin:0;}
#container{width:800px; margin:50px;}
.tab{ padding:0; margin:0; }
.tab li{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;}
.content{ float:none; padding-top:30px; border:solid 1px black; clear:both; }
.content div{ border-top:0px; height:60px;}
.tab_selected{ border-left:solid 1px black; background-color:#ffffff; border-right:solid 1px black; border-top:solid 1px black; border-bottom:0px; bottom:-1px; position:relative; z-index:1}
.tab_current{ text-decoration:underline;}
</style>
<script language="javascript" type="text/javascript">
$(
function() {
$(".content div:gt(0)").hide();
$(".tab li").css("cursor", "pointer");
$(".tab li").hover(function() {
$(this).addClass("tab_current");
}, function() {
$(this).removeClass("tab_current");
}).click(
function() {
$(this).addClass("tab_selected").siblings().removeClass("tab_selected");
$(".content div").eq($(this).index()).siblings().hide().end().show();
}
)
}
);
</script>
</head>
<body>
<div id="container">
<div class="tab">
<ul>
<li class="tab_selected">选项卡A</li>
<li>选项卡B</li>
<li>选项卡C</li>
</ul>
</div>
<div class="content">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航