jQuery选项卡js选项卡

至成科技2014-07-24访问量（2941）评论（0）

摘要：jQuery选项卡，js选项卡

jQuery内容：

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {	
  
  $('#tabMenu li').click(function(){    
   
    if (!$(this).hasClass('selected')) {               
	   
	    $('#tabMenu li').removeClass('selected');	    
	   
	    $(this).addClass('selected');	    
	    
	    $('.boxBody div.parent').slideUp('1500');	    
	   
	    $('.boxBody div.parent:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
	    
	 }
    
  }).mouseover(function() {
  
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout');   
    
  }).mouseout(function() {    
   
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');    
    
  });
	
  $('.boxBody #category li').click(function(){
   
    window.location = $(this).children().attr('href');
  }).mouseover(function() {
   
    $(this).css('backgroundColor','#888');
    $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {    
    
    $(this).css('backgroundColor','');
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  });  	
	
  $('#.boxBody li').click(function(){
    window.location = $(this).children().attr('href');
  }).mouseover(function() {
    $(this).css('backgroundColor','#888');
  }).mouseout(function() {
    $(this).css('backgroundColor','');
  });  	
	
});

</script>

CSS样式内容

<style>
body{font-family:arial;font-size:10px;color:#ccc;background-color:#555}
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;cursor:pointer;cursor:hand}

li.comments {background:url(images/tabComment.png) no-repeat 0 -32px;}
li.posts {background:url(images/tabStar.png) no-repeat 0 -32px;}
li.category {background:url(images/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(images/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(images/tabRandom.png) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {}
.boxTop {background:url(images/boxTop.png) no-repeat;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(images/boxBottom.png) no-repeat;}

.boxBody div.parent {display:none;}
.boxBody div.show {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;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;}
</style>

HTML内容

<div class="box">
<ul id="tabMenu">
  <li class="posts selected"></li>
  <li class="comments"></li>
  <li class="category"></li>
  <li class="famous"></li>
  <li class="random"></li>
</ul>
<div class="boxTop"></div>

<div class="boxBody">
  
  <div id="posts" class="show parent">
    <ul>
      <li><a href="http://www.xazcit.com/403.html">网站建设 HTML5 常用的几个标签</a></li>
      <li><a href="http://www.xazcit.com/91.html">网页设计5个原则</a></li>
      <li><a href="http://www.xazcit.com/409.html">thinkphp更新教程</a></li>
      <li><a href="http://www.xazcit.com/410.html">西安很工作室和网站建设公司都在用thinkphp3.2.2</a></li>
      <li><a href="http://www.xazcit.com/405.html">西安网站建设中的 css3 动画</a></li>
      <li class="last">至成科技-孙鑫</li>
    </ul>  
  </div>  
  
  <div id="comments" class="parent">
    <ul>
     <li><a href="http://www.xazcit.com/408.html">怎么修改网站背景色-至成科技网站建设小知识</a></li>
      <li><a href="http://www.xazcit.com/407.html">西安网站建设教您网站seo</a></li>
      <li><a href="http://www.xazcit.com/382.html">好的网站才能吸引住客户的眼球</a></li>
      <li><a href="http://www.xazcit.com/398.html">至成科技高端定制响应式网站建设</a></li>
      <li><a href="http://www.xazcit.com/400.html">服务器备案,主机备案,vps备案,虚拟主机备案</a></li>
      <li class="last">至成科技-孙鑫</li>
    </ul>
  </div>
  
  <div id="category" class="parent">
    <ul>
      <li><a href="http://www.queness.com/tag/ajax">ajax</a></li>
      <li><a href="http://www.queness.com/tag/css-html">css-html</a></li>
      <li><a href="http://www.queness.com/tag/freebies">freebies</a></li>
      <li><a href="http://www.queness.com/tag/icon">icon</a></li>
      <li><a href="http://www.queness.com/tag/inspiration">inspiration</a></li>
      <li><a href="http://www.queness.com/tag/javascript">javascript</a></li>
      <li><a href="http://www.queness.com/tag/logo">logo</a></li>
      <li><a href="http://www.queness.com/tag/photography">photography</a></li>
      <li><a href="http://www.queness.com/tag/photoshop">photoshop</a></li>
      <li><a href="http://www.queness.com/tag/php">php</a></li>
      <li><a href="http://www.queness.com/tag/seo">seo</a></li>
      <li><a href="http://www.queness.com/tag/tutorial">tutorial</a></li>
      <li><a href="http://www.queness.com/tag/usability">usability</a></li>
      <li><a href="http://www.queness.com/tag/wallpaper">wallpaper</a></li>
      <li class="last"><a href="http://www.queness.com/tag/wordpress">wordpress</a></li>
    </ul>  
  </div>
  
  <div id="famous" class="parent">
    <ul>
      <li>简单的jQuery模态窗口教程</li>
      <li>创建一个简单的CSS + Javascript jQuery工具提示</li>
      <li>导航列表菜单+ Jquery动画效果教程</li>
      <li class="last">至成科技-孙鑫</li>
    </ul>  
  </div>
  
  <div id="random" class="parent">
    <ul>
      <li>50个单色网站设计</li>
      <li>案例:网页设计中的面包屑和较佳实践</li>
      <li>简单的JQuery模态窗口教程</li>
      <li>导航列表菜单+ Jquery动画效果教程</li>
      <li>创建一个简单的CSS + Javascript jQuery工具提示</li>
    </ul>    
  </div>        

</div>

<div class="boxBottom"></div>

</div>

源程序下载：/Uploads/file/20140619/20140619102937_26626.rar