jQuery 学习笔记之十二 (选项卡)

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moyiqun/archive/2013/06/06/3121181.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一个使用jQuery实现的简单选项卡插件。通过绑定点击事件，实现了选项卡的切换效果，包括高亮当前选项并显示对应内容，同时取消其他选项的高亮并隐藏其内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   jQuery 实现的一个简单的选项卡。
  
   <!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>
  
   <link href=
   "css/style.css" 
   rel=
   "stylesheet" 
   type=
   "text/css" 
   />
  
   <!--   引入jQuery -->
  
   <script src=
   "../scripts/jquery-1.3.1.js" 
   type=
   "text/javascript"
   ></script>
  
   <script type=
   "text/javascript" 
   >
  
   //<![CDATA[
  
   $(function(){
  
   var $div_li =$(
   "div.tab_menu ul li"
   );
  
   $div_li.click(function(){
  
   $(
   this
   ).addClass(
   "selected"
   )            
   //当前<li>元素高亮
  
   .siblings().removeClass(
   "selected"
   );  
   //去掉其它同辈<li>元素的高亮
  
   var index =  $div_li.index(
   this
   );  
   // 获取当前点击的<li>元素 在 全部li元素中的索引。
  
   $(
   "div.tab_box > div"
   )       
   //选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
  
   .eq(index).show()   
   //显示 <li>元素对应的<div>元素
  
   .siblings().hide(); 
   //隐藏其它几个同辈的<div>元素
  
   }).hover(function(){
  
   $(
   this
   ).addClass(
   "hover"
   );
  
   },function(){
  
   $(
   this
   ).removeClass(
   "hover"
   );
  
   })
  
   })
  
   //]]>
  
   </script>
  
   </head>
  
   <body>
  
   <div 
   class
   =
   "tab"
   >
  
   <div 
   class
   =
   "tab_menu"
   >
  
   <ul>
  
   <li 
   class
   =
   "selected"
   >时事</li>
  
   <li>体育</li>
  
   <li>娱乐</li>
  
   </ul>
  
   </div>
  
   <div 
   class
   =
   "tab_box"
   > 
  
   <div>时事</div>
  
   <div 
   class
   =
   "hide"
   >体育</div>
  
   <div 
   class
   =
   "hide"
   >娱乐</div>
  
   </div>
  
   </div>
  
   </body>
  
   </html>
  
   首先绑定事件，绑定事件后将当前单击的<li>元素高亮，然后去掉其他同辈<li>元素的高亮。
  
   var $div_li = $(
   "div.tab_menu ul li"
   );
  
   $div_li.click(function(){ 
  
   $(
   this
   ).addClass(
   "selected"
   )             
   //当前<li>元素高亮
  
   .siblings().removeClass(
   "selected"
   );     
   //去掉其他同辈<li>元素的高亮
  
   });
  
   单击选项卡后，当前<li>元素处于高亮状态，而其他的<li>元素已去掉高亮状态。但选项卡下面的内容还没切换，因此需要将下面的内容也对应一个<div>区域。
  
   因此可以根据当前单击的<li>元素在所有<li>元素中的索引，然后通过索引来显示对应的区域。
  
   var $div_li= $(
   "div.tab_menu ul li"
   ) ;
  
   $div_li.click(function(){ 
  
   $(
   this
   ) .addClass(
   "selected"
   ) 
   //当前<li>元素高度
  
   .siblings().removeClass(
   "selected"
   ); 
   //去掉其他同辈<li>元素的高亮
  
   var index=$div_li.index(
   this
   ); 
   //获取当前单击的<li>元素在全部<li>元素中的索引
  
   $(
   "div.tab_box > div"
   ) 
   //选取子节点
  
   .eq(index).show()       
   //显示<li>元素对应的<div>元素
  
   .siblings().hide();     
   //隐藏其他几个同辈的<div>元素
  
   }).hover(function(){ 
  
   $(
   this
   ).addClass(
   "hover"
   );
  
   },function(){ 
  
   $(
   this
   ).removeClass(
   "hover"
   );
  
   })