选项卡小案例 - 技术经验

选项卡小案例

来源：cnblogs　　作者：码农下的天空　　时间：2019/8/29 8:47:53　　对本文有异议

　　在各种各样的网站中，选项卡效果都是经常见到的，在这里用简单的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 })