TAB(JQUERY)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>tab</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
body{ font:12px/1.5 Verdana,Geneva,Arial,Helvetica,sans-serif;}
body,h1,h2,h3,h4,h5,h6,hr,p,dl,th,dt,dd,ul,ol,li,form,fieldset,legend,button,input,textarea{ outline:medium none; padding:0;margin:0; }
ul,ol{ list-style:none; }
a{ text-decoration:none; }
img{ border:none; display:block; }
em,i{ font-style:normal;}
s{ display:inline-block; overflow: hidden; }
input{ vertical-align:middle; }
h2,h3,h4,h5{ font-size:14px;}
.tabs-box
{
/*导航容器定义*/
width:500px; height:300px;
}
.tabs li
{
/*默认标签样式*/
float:left; width:100px; height:24px; line-height:24px;
}
.tabs li.selected
{
/*激活的标签样式*/
background:#f00;
}
.tabs-panel
{
/*默认的显示区域样式*/
display:none; width:300px; height:200px; border:1px solid #ccc; backgrond:#fff;
}
.tabs-show
{
display: block;
}
</style>
<script type="text/javascript">
$(function() {
$(".tabs").find("li").mouseover(function(e) {
if (e.target == this) {
var tabs = $(this).parent().children("li");
var panels = $(this).parent().parent().children("div");
var index = $.inArray(this, tabs);
if (panels.eq(index)[0]) {
tabs.removeClass("selected")
.eq(index).addClass("selected");
panels.removeClass("tabs-show")
.eq(index).addClass("tabs-show");
}
}
});
});
</script>
</head>
<body>
<div>
<ul>
<li>
论坛新帖
</li>
<li>
最新博文
</li>
<li>
最新
</li>
</ul>
<div class="tabs-panel tabs-show">
--111这里调用最新论坛文章--
</div>
<div>
--2222这里调用最新博客文章-
</div>
<div>
-3333-这里调用最新论坛文章--
</div>
</div>
</body>
</html>