jQuery Tabbed Interface

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、完成