选项卡小案例

  在各种各样的网站中,选项卡效果都是经常见到的,在这里用简单的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="#">htmla>li>
30                   <li><a href="#">cssa>li>
31                   <li><a href="#">javascripta>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.cnp>
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 })

你可能感兴趣的:(选项卡小案例)