欢迎光临
一个有态度、有温度的分享型博客

jQuery实现Tab选项卡css样式及详解

为了使页面简洁而有条理,我们常常会使用到选项卡,本文记录了一个简单的选项卡的实现过程:

界面预览:

界面预览

此选项卡的实现机制为:

先定义了一个无序列表,每个列表项中定义了一个链接,此链接指向一个锚点,然后通过JS控制选项卡及相关内容的显示效果。

无序列表html代码:

<ul class="tabs">

      <li><a href="#tab1">Tab1</a></li>

    <li><a href="#tab2">Tab2</a></li>

    <li><a href="#tab3">Tab3</a></li>

    <li><a href="#tab4">Tab4</a></li>

</ul>

选项卡对应的div:

<div class="tab_container">

    <div id="tab1" class="tab_content">

    </div>

    <div id="tab2" class="tab_content">

    </div>

    <div id="tab3" class="tab_content">

    </div>

    <div id="tab4" class="tab_content">

    </div>

</div>

完整代码地址:[点我开始下载;]

转载请注明出处:容休博客 » jQuery实现Tab选项卡css样式及详解

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址