选项卡小案例
程序员文章站
2022-07-09 20:42:04
在各种各样的网站中，选项卡效果都是经常见到的，在这里用简单的jquery布局一个小的选项卡案例。 HTML代码： jq代码： ......
在各种各样的网站中，选项卡效果都是经常见到的，在这里用简单的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 })
上一篇： 朋友圈里有谁没对象吗？
下一篇： jq 实现切换菜单选中状态