<!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>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>效果</title>
</head>
<body>
如今，有很多网站使用，以此来节省空间的标签在网页基础的内容。我已经看到了使用其类别，文章，评论和标签式界面，内容随机职位wordpress的很多网站。这是一个很好的"太空金丹"，如果用它正确，它可以提高你网站的可用性以及。权，首先，我们需要有这种想法和标签式界面的设计结构。
在我们开始之前，如果你是一个web托管公司来看，这是一个很好的评价 - hostgator的进展。
我的想法：
在上面，内容按钮居住在不同的div元素，
点击其中的一个按钮，它显示了有关内容;
点击其他按钮，它隐藏了现有的和正确的显示。
设计结构：
html
在上图中doesn't负载的情况下，请允许我再次解释了设计结构。在ul＃tabmenu在顶部又名标签的按钮。这是你点击，它会触发的载荷内容jquery的。
内boxbody，您需要指定5的div，在div的数量将取决于有多少物品定义＃tabmenu在这种情况下，我们有5个，therefre，你需要5的div定义的元素。boxbody。
网页特效的负荷的div的指数为基础的内容。boxbody。例如，如果你点击?在。boxbody（div的索引为0）第一个按钮（或指数0星），它会载入第一个div。
因此，div的安排英寸boxbody必须与按键在＃tabmenu安排。
<div class="box">
<ul id="tabmenu">
<li class="posts selected"></li> <!-- default button-->
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul><div class="boxtop"></div>
<div class="boxbody">
<!-- default page-->
<div id="posts" class="show">
<ul>
<li>post 1</li>
<li>post 2</li>
<li class="last">post 3</li>
</ul>
</div>
<div id="comments">
<ul>
<li>comment 1</li>
<li>comment 2</li>
<li class="last">comment 3</li>
</ul>
</div>
<div id="category">
<ul>
<li>category 1</li>
<li>category 2</li>
<li class="last">category 3</li>
</ul>
</div>
<div id="famous">
<ul>
<li>famous post 1</li>
<li>famous post 2</li>
<li class="last">famous post 3</li>
</ul>
</div>
<div id="random">
<ul>
<li>random post 1</li>
<li>random post 2</li>
<li class="last">random post 3</li>
</ul>
</div></div>
<div class="boxbottom"></div>
</div>
css教程代码
<style>
a {
color:#ccc;
text-decoration:none;
}a:hover {
color:#ccc;
text-decoration:none
}#tabmenu {
margin:0;
padding:0 0 0 15px;
list-style:none;
}#tabmenu li {
float:left;
height:32px;
width:39px;
cursor:pointer;
cursor:hand
}/* this is the button images */
li.comments {background:url(images/tabcomment.gif) no-repeat 0 -32px;}
li.posts {background:url(images/tabstar.gif) no-repeat 0 -32px;}
li.category {background:url(images/tabfolder.gif) no-repeat 0 -32px;}
li.famous {background:url(images/tabheart.gif) no-repeat 0 -32px;}
li.random {background:url(images/tabrandom.gif) no-repeat 0 -32px;}li.mouseo教程ver {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}.box {
width:227px
}.boxtop {
background:url(images/boxtop.gif)no-repeat;
height:11px;
clear:both
}.boxbody {
background-color:#282828;
}.boxbottom {
background:url(images/boxbottom.gif) no-repeat;
height:11px;
}.boxbody div {
display:none;
}.boxbody div.show {
display:block;
}.boxbody #category a {
display:block
}/* styling for the content*/
.boxbody div ul {
margin:0 10px 0 25px;
padding:0;
width:190px;
list-style-image:url(images/arrow.gif)
}.boxbody div li {
border-bottom:1px dotted #8e8e8e;
padding:4px 0;
cursor:hand;
cursor:pointer
}.boxbody div ul li.last {
border-bottom:none
}.boxbody div li span {
font-size:8px;
font-style:italic;
color:#888;
}/* ie hacks */
*html .boxtop {margin-bottom:-2px;}
*html .boxbody div ul {margin-left:10px;padding-left:15px;}</style>
js代码
<script type=text/javascript>
$(document).ready(function() {
//get all the li from the #tabmenu ul
$('#tabmenu > li').click(function(){
//perform the actions when it's not selected
if (!$(this).hasclass('selected')) {//remove the selected class from all li
$('#tabmenu > li').removeclass('selected');
//after cleared all the li, reassign the class to the selected tab
$(this).addclass('selected');
//hide all the div in .boxbody
$('.boxbody div').slideup('1500');
//look for the right div index based on the navigation ul index
$('.boxbody div:eq(' + $('#tabmenu > li').index(this) + ')').slidedown('1500');
}}).mouseover(function() {
//add and remove class, personally i dont think this is the right way to do it,
//if you have better ideas to toggle it, please comment
$(this).addclass('mouseover');
$(this).removeclass('mouseout');
}).mouseout(function() {
//add and remove class
$(this).addclass('mouseout');
$(this).removeclass('mouseover');
});
//mouseover with animate effect for category menu list :)
$('.boxbody #category li').mouseover(function() {//change background color and animate the padding
$(this).css('backgroundcolor','#888');
$(this).children().animate({paddingleft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {
//change background color and animate the padding
$(this).css('backgroundcolor','');
$(this).children().animate({paddingleft:"0"}, {queue:false, duration:300});
});
//mouseover effect for posts, comments, famous posts and random posts menu list.
$('.boxbody li').click(function(){
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundcolor','#888');
}).mouseout(function() {
$(this).css('backgroundcolor','');
});
});</script>
最后
你会得到一个美丽的jquery分页的菜单！
然而，在分类页面，如果你使用ie浏览器，礼不能当鼠标悬停hightlighted它（这就是为什么大家都讨厌ie浏览器）。如果你知道这是什么问题，请告知：）
最后但并非最不重要，检查了演示或下载源代码，使用它。任何问题。请留下您的评论：）
支持我的书签这篇文章和分享给您的朋友：）谢谢
</body>
</html>