当前位置：首页 > 网页特效 > 选项卡

jQuery和css3响应式tab选项卡插件

分类：选项卡日期：2024-05-14 点击(3) 评论(0)

简介

##### HTML结构
html结构包括两个无序列表：.cd-tabs-navigation 和 .cd-tabs-content。第一个导航按钮，第二个内容。它们被包装到 div .cd-tabs中。

```html
<div class="cd-tabs">
  <nav>
    <ul class="cd-tabs-navigation">
      <li><a data-content="inbox" class="selected" href="#0">Inbox</a></li>
       
      <li></li>
    </ul> 
  </nav>
  
  <ul class="cd-tabs-content">
    <li data-content="inbox" class="selected">
      <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>
  
      <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>
    </li>
  
    <li></li>
  </ul> 
</div> 
```
##### CSS样式
我们使用CSS媒体查询技术来改变tab选项卡的水平或垂直显示方式。这个插件是基于移动设备优先的。给nav元素设置overflow:auto来隐藏一部分无序列表-超出显示屏幕的部分，然后使用-webkit-overflow-scrolling: touch 来为移动设备制作一个平滑的滚动条。

```html

.cd-tabs nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /*...*/
}
```

web299.com

jQuery和css3响应式tab选项卡插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果