js进阶 11-21 纯css实现选项卡

转载

mb5fdcae3079e89 2018-06-29 13:50:00

文章标签 js进阶课程选项卡 html 微信人工智能 文章分类 后端开发

js进阶 11-21 纯css实现选项卡

一、总结

一句话总结：核心原理，a标签的锚点效果+父div限宽+多的部分隐藏。

1、如何实现a标签的锚点效果？

href属性找到对应的位置就好，和选择器一样，一般是id

37             <li><a href="#div1">菜单1</a></li>
38             <li><a href="#div2">菜单2</a></li>
39             <li><a href="#div3">菜单3</a></li>

44         <div id="div1">内容111111111111.......</div>
45         <div id="div2">内容222222222222.......</div>
46         <div id="div3">内容333333333333......</div>

2、如何实现父div限宽+多的部分隐藏？

28         #content{
29             height: 152px;overflow: hidden;
30         }

3、如何实现移上去标签改变透明度？

opacity属性

22         #list a:hover{opacity: 0.6}

4、clear:both一般写在哪个里面？

一般单独写在一个类里面，用的时候直接调用就好了，简单方法

23         .clear{clear: both;}

二、纯css实现选项卡

选项卡(TAB标签页)

案例描述：选项卡可以扩展页面的可用空间，应用非常广泛.

它的实现原理并不复杂，可以有许多在实现方法，这里我们将分别以CSS3，JavaScript,jQuery三种方法为大家演示

我们这里仅以实现的原理为重点，大家练习的时候可以发挥自己的想象力，进一步的去美化选项卡的效果，制作出自己喜欢的选项卡样式。

js进阶 11-21 纯css实现选项卡_选项卡

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style>
10         *{margin:0;padding: 0;}
11         body{padding: 50px}
12         a{text-decoration:none;}
13         #list{list-style-type: none}
14         #list a{
15             float: left;
16             background: orange;
17             width: 100px;
18             height: 30px;
19             line-height: 30px;
20             text-align: center;
21         }
22         #list a:hover{opacity: 0.6}
23         .clear{clear: both;}
24         #content div{
25             width: 298px;height: 150px;
26             border:1px solid green;
27         }
28         #content{
29             height: 152px;overflow: hidden;
30         }
31     </style>
32 </style>
33 </head>
34 <body>
35     <div id="tab">
36         <ul id="list">
37             <li><a href="#div1">菜单1</a></li>
38             <li><a href="#div2">菜单2</a></li>
39             <li><a href="#div3">菜单3</a></li>
40         </ul>
41     </div>
42     <div class="clear"></div>
43     <div id="content">
44         <div id="div1">内容111111111111.......</div>
45         <div id="div2">内容222222222222.......</div>
46         <div id="div3">内容333333333333......</div>
47     </div>
48 </body>
49 </html>