在各种各样的网站中，选项卡效果都是经常见到的，在这里用简单的jquery布局一个小的选项卡案例。
HTML代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>欢迎学习前端</title> 6 <style> 7 *{margin:0;padding:0;} 8 a{color:black;text-decoration:none;} 9 ul li {list-style: none;padding-left: 5px;width:100px;height:30px;} 10 .showys{background:#E3CE12;} 11 .top{width:500px;height:30px;background:orange;margin:auto;margin-top: 10px;} 12 .message{width:500px;height:300px;margin:auto;} 13 .left{width:100px;height:300px;background:green;float:left;} 14 .middle div{width:300px;height:300px;background:yellow;float:left;display: none;} 15 .middle .show{width:300px;height:300px;background:yellow;float:left;display: block;} 16 .middle p{text-indent:2em;margin:10px;} 17 .right{width:100px;height:300px;background:green;float:right;} 18 .footer{width:500px;height:30px;background:red;margin:auto;} 19 .footer,.top p{text-align: center;line-height: 30px;cursor:pointer;} 20 </style> 21 </head> 22 <body> 23 <div class="top"> 24 <p>欢迎学习前端</p> 25 </div> 26 <div class="message"> 27 <div class="left"> 28 <ul> 29 <li class="showys"><a href="#">html</a></li> 30 <li><a href="#">css</a></li> 31 <li><a href="#">javascript</a></li> 32 </ul> 33 </div> 34 <div class="middle"> 35 <div class="show"> 36 <p>HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p> 37 </div> 38 <div> 39 <p>css:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 40 </p> 41 </div> 42 <div> 43 <p>JS:JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。 44 </p> 45 </div> 46 </div> 47 <div class="right"> 48 </div> 49 </div> 50 <div class="footer"> 51 <p>Copyright © w3cschool.cn</p> 52 </div> 53 <script src="jquery-1.12.0.min.js"></script> 54 </body> 55 </html>
jq代码：
1 $(document).ready(function(){ 2 3 $("ul>li").mouseenter(function () { 4 5 $(this).addClass("showys"); 6 7 $(this).siblings().removeClass('showys'); 8 9 var index=$(this).index(); 10 11 var $div=$(".middle div").eq(index); 12 13 $div.siblings().removeClass("show"); 14 15 $div.addClass("show"); 16 17 }); 18 19 })