你的位置:首页 > 软件开发 > 网页设计 > 【Little Demo】左右按钮tab选项卡双切换

【Little Demo】左右按钮tab选项卡双切换

发布时间:2017-03-22 00:00:25
通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了。 1.左右按钮tab选项卡双切换很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分。1) 先实现Tab内容和标签部分的显示:HTML代码:<div ...

通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了。

 

1.左右按钮tab选项卡双切换

【Little Demo】左右按钮tab选项卡双切换

很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分。

1) 先实现Tab内容和标签部分的显示:

HTML代码:

<div class="tab-Infomations">  <div class="arrows"></div>  <div class="tab-content">    <div class="tab-info">      <div class="info info1">        <p>          We provide a full spectrum of online advertising...          <br />          <a href="#" class="GlobalButton"><span>Tour Our Services</span></a>        </p>      </div>      <div class="info info2 hidden">...</div>      <div class="info info3 hidden">... </div>      <div class="info info4 hidden">... </div>    </div>    <div class="tab-thumbs">      <ul>        <li class="selected"><a href="javascript:;">What We Do</a></li>        <li><a href="javascript:;">Who We Are</a></li>        <li><a href="javascript:;">Why Choose Us</a></li>        <li><a href="javascript:;">How We Work</a></li>      </ul>    </div>  </div></div>

原标题:【Little Demo】左右按钮tab选项卡双切换

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录