使用原生js与jQuery分别实现一个简单的tab页签

　　tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形。使用面非常广，下面我们用两种方法简单实现之。

　　首先，构建页面元素。页签的可点击部分我们通常用列表来承载，包括ul和ol，我们这里让页签呈横向分布，所以需要使之向左浮动。而页签内容部分使用div承载即可。另外，我们需要对具有共性的元素统一控制样式和行为，所以就有了下面的dom结构：

<div id="main">      <ul id="tabbar" class="cl">        <li class="t1">t1</li>        <li class="def">t2</li>        <li class="def">t3</li>        <li class="def">t4</li>        <li class="def">t5</li>      </ul>      <div id="content">        <div class="cont t1">Hi !</div>        <div class="cont t2">I Like You!</div>        <div class="cont t3">Hello World!</div>        <div class="cont t4">How Are You?</div>        <div class="cont t5">I'm fine ,and you?</div>      </div> </div>

原标题：使用原生js与jQuery分别实现一个简单的tab页签

关键词：JS