一个jquery的选项卡详解

本文介绍了一个简单的Tab切换效果实现方案,使用HTML、CSS和jQuery完成布局及交互逻辑。通过jQuery控制显示不同的内容区域,实现平滑的切换效果。

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

先看html代码
<

Java代码 复制代码
  1. body>   
  2. <div class="tab">   
  3.     <div class="tab_menu">   
  4.         <ul>   
  5.             <li class="selected"><span>xhtml</span></li>   
  6.             <li><span>css</span></li>   
  7.             <li><span>javascript</span></li>   
  8.         </ul>   
  9.     </div>   
  10.     <div class="tab_box">   
  11.         <div>xhtml</div>   
  12.         <div>css</div>   
  13.         <div>javascript</div>   
  14.     </div>   
  15. </div>   
  16.   
  17. </body>  
body>
<div class="tab">
	<div class="tab_menu">
		<ul>
			<li class="selected"><span>xhtml</span></li>
			<li><span>css</span></li>
			<li><span>javascript</span></li>
		</ul>
	</div>
	<div class="tab_box">
		<div>xhtml</div>
		<div>css</div>
		<div>javascript</div>
	</div>
</div>

</body>


jquery代码

Java代码 复制代码
  1. <script type="text/javascript">   
  2. $(function(){   
  3.     var tab_menu_li = $('.tab_menu li');   
  4.     $('.tab_box div:gt(0)').hide();   
  5.        
  6.     tab_menu_li.mouseover(function(){   
  7.         $(this).addClass('selected')   
  8.                .siblings().removeClass('selected');   
  9.   
  10.         var index = tab_menu_li.index(this);//用于同步   
  11.         $('.tab_box div').eq(index).show()   
  12.                          .siblings().hide();   
  13.     }).hover(function(){   
  14.         $(this).addClass('hover');   
  15.     },function(){   
  16.         $(this).removeClass('hover');   
  17.     });   
  18. });   
  19. </script>  


本文来源:
我的异常网
Java Exception
Dotnet Exception
Oracle Exception

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值