建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery选项卡制作插件tabBox

来源:易助科技网浏览量:9收藏

简介


jQuery Tab 是一款可以简单方便制作选项卡的 jQuery插件,它具有垂直滚动,水平滚动 ,点击触发,划过触发和自动切换等效果。


JQuery选项卡制作插件tabBox-示例图



参数说明:


tabId:切换的标签父级容器
tabTag:切换的具体标签
conId:切换的内容父级容器
conTag:切换的具体内容容器
act:事件(click为鼠标点击,mouseover为鼠标经过)
effact:具体内容切换效果(scrolly为垂直滚动或者是上下滚动,scrollx为水平滚动或者左右滚动,slow为缓动效果,为空则无效果即为普通切换)
auto:是否自动切换(true 为自动  false不自动切换)
dft:设置起始显示序列从0开始数

(下载的附件中带有DEMO)


使用


1.  引入 jquery.js 和 tabBox.js 文件


2. HTML


<div id="testtab" >
  <div id="tabtag">
    <ul>
      <li>菜单一</li>
      <li>菜单二</li>
      <li>菜单三</li>
    </ul>
  </div>
  
  <div id="tabcon" >
    <div>
      <ul>
        <li><a href="#">内容一</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a href="#">内容二</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a href="#">内容三</a></li>
      </ul>
    </div>
  </div>
</div>

//CSS
<style type="text/css">
.testtab{ border:4px solid #ccc; width:500px;height:400px;}
.tabtag{ line-height:24px; height:24px; border-bottom:2px solid #ccc;}
.tabtag li{ float:left; width:24%; text-align:center; background:#eee;}
.tabtag li.cur{ color:#900; background:#fff;}
.tabcon{ height:100px; overflow:hidden;}
.tabcon div{ height:80px; padding:10px; color:#900; font-size:14px;}
.tabcon li{ line-height:22px;}
</style>


3.  调用


<script type="text/javascript">
  $(document).ready(function(){
    $("#testtab").tab({
      tabId:"#tabtag",
      // 切换控制器的 ID
      
      tabTag:"li",
      // 切换控制器标签
      
      conId:"#tabcon",
      // 内容容器 ID
      
      conTag:".tabcon"
      // 容器标签
      
      //auto:true,
      // 自动切换
      
      //act:"click",
      // 点击触发 也可以不设置 默认就为 click 设置为 mouseover 则为鼠标划过
      
      //effact:"scrolly",
      // 效果为纵向滚动,横向滚动效果为
      
      scrollx//dft:0,
      // 设置起始显示序列
      
      //effact:"slow"
      // "slow" 效果
    })
  })
</script>



相关链接

GitHub 地址:https://github.com/Desteel/jQuery-TabBox

在线演示 :https://codepen.io/Dest/pen/BMQpXp?editors=0010