1.引言：
如今，许多网站使用的是标签的内容，以节省空间的一个网页。 我看到了很多网站使用WordPress的标签界面，其类别，职位，意见和随机员额内容。 这是一个很好的“空间节约” ，如果使用正确，它可以提升您的网站可用性以及。 权利，首先，我们需要有创意和设计结构为标签界面
自己的想法： 按钮顶端，内容居住在不同的DIV元素， 点击其中一个按钮，它表明的有关内容; 按其他按钮，它掩盖了现有的和显示正确的。
结构的设计：
2 、HTML
<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>
3、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.mouseover {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>
4、Javascript
<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>
5、完成
相关资源：敏捷开发V1.0.pptx