Tab Small Case

　　In a variety of websites, tabs, the effect is often seen, where a small tab with a simple case of jquery layout.

　　HTML code:

 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 > the HTML: Hypertext Markup Language (Hyper Text Markup Language), under application of a Standard Generalized Markup Language. HTML is not a programming language, but a markup language (markup language), is necessary for creating web pages. "Hypertext" refers to the inside pages can contain images, links, and even music, programs and other non-text elements. Structure HTML (hypertext markup language or) includes a "header" portion and a "body" portion, in which the "head" portion of web page providing information about the "body" section provides specific content page. </ P > 
37 [          </ div > 
38 is          < div > 
39              < P > CSS: Cascading Style Sheets (English name: Cascading Style Sheets) is an expression for HTML (an application of Standard Generalized Markup Language) or XML (standard a subset of the computer language Generalized Markup language) documents and other styles. CSS can not be statically modified pages, with a variety of scripting languages can also be dynamically formatted for each element on the page.
40  </ P > 
41 is          </ div >
42 is          < div > 
43 is              < P > the JS: one kind of the JavaScript scripting language literal, is a dynamic type, weakly typed, prototype-based language, the type of built-in support. It is known as JavaScript interpreter engine, as part of the browser, widely used in client-side scripting language that was first used on HTML (an application under the Standard Generalized Markup Language) pages, HTML pages used to increase the dynamic function .
44 is  </ P > 
45          </ div > 
46 is     </ div > 
47      < div class = "right" > 
48      </ div > 
49      </ div > 
50      < div class = "footer" > 
51 is       < P ></p>
52     </div>
53 <script src="jquery-1.12.0.min.js"></script>
54 </body>
55 </html>

　　jq Code:

 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 })

Guess you like