锋利的jquery 网页选项卡
1 <html> 2 <head> 3 <style type="text/css"> 4 .tab_menu{ 5 border:0px solid red; 6 height:18px; 7 width:200px; 8 } 9 ul{ 10 list-style:none; 11 display:inline; 12 } 13 li{ 14 float:left; 15 margin:0 3px; 16 border:1px solid grey; 17 font-size:80%; 18 } 19 .selected{ 20 background-color:red; 21 } 22 .tab_box{ 23 margin:0 0px; 24 } 25 .tab_box div{ 26 height:30px; 27 width:200px; 28 border:1px solid red; 29 margin:0 3px; 30 } 31 .hide{ 32 display:none; 33 } 34 </style> 35 </head> 36 37 <body> 38 39 <div class="tab_menu"> 40 <ul> 41 <li class="selected">时事</li> 42 <li>体育</li> 43 <li>娱乐</li> 44 </ul> 45 </div> 46 47 <div class="tab_box"> 48 <div>时事</div> 49 <div class="hide">体育</div> 50 <div class="hide">娱乐</div> 51 </div> 52 53 <script src="jquery-1.7.2.js"></script> 54 <script type="text/javascript"> 55 var div_li=$('div.tab_menu ul li') 56 div_li.click(function(){ 57 $(this).addClass("selected") 58 .siblings().removeClass("selected"); 59 60 var index=div_li.index(this); 61 $("div.tab_box > div") 62 .eq(index).show() 63 .siblings().hide(); 64 }); 65 66 </script> 67 68 </body> 69 </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人