Hi !
I Like You!
Hello World!
How Are You?
I'm fine ,and you?
- t1
- t2
- t3
- t4
- t5
时间：2021-07-01 10:21:17 帮助过：3人阅读
首先，构建页面元素。页签的可点击部分我们通常用列表来承载，包括ul和ol，我们这里让页签呈横向分布，所以需要使之向左浮动。而页签内容部分使用div承载即可。另外，我们需要对具有共性的元素统一控制样式和行为，所以就有了下面的dom结构：
- t1
- t2
- t3
- t4
- t5
Hi !I Like You!Hello World!How Are You?I'm fine ,and you?
ul左浮动以后，为了清除浮动对后续元素的影响，所以通过after伪类设置clear属性，同时兼顾ie低版本加入zoom触发ie haslayout。所以就有了下面的样式：
html,body,div,ul,li{margin:0; padding:0; }
.cl{zoom:1;}
.cl:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}
ul{list-style:none;}
body{padding-top:100px; background:#eee; font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;}
#main{margin:0 auto; width:800px;}
#main #tabbar{}
#main #tabbar li,#main #content .cont{text-align:center; color:#fff;}
#main #tabbar li{padding:0 20px; height:35px; line-height:35px; font-size:14px; cursor:pointer; float:left;}
#main #content{height:350px; overflow:hidden; position:relative;}
#main #content .cont{width:100%; height:350px; line-height:350px; font-size:48px; z-index:0; position:absolute;}
#main #tabbar li.def{color:#333; background:#fff;}
#main #tabbar li.t1,#main #content .cont.t1{color:#fff; background:#4e6b9c;}
#main #tabbar li.t2,#main #content .cont.t2{color:#fff; background:#c52946;}
#main #tabbar li.t3,#main #content .cont.t3{color:#fff; background:#33a6ff;}
#main #tabbar li.t4,#main #content .cont.t4{color:#fff; background:#ffab4e;}
#main #tabbar li.t5,#main #content .cont.t5{color:#fff; background:#64bccc;}
html部分大致如此。
采用原生js实现时，我们这里主要对每个li分别绑定点击事件，通过点击使当前内容页显示，其他内容页隐藏，显隐的过程通过定时器不断增减内容的透明度直至完全隐藏或显示。
由上可见，其实使用原生js操作dom还是比较麻烦的，不然“write less,do more”的jQuery也不会诞生。下面用jQuery简单实现：
这个例子比较简单，但却很实用，当然实际工作中我们一般不会这样去写，我们通常会把以此为基础去封装一个可重用的控件，但基本思想不变。
以上所述就是本文的全部内容了，希望大家能够喜欢。