描述:jQuery Tab 是 jQuery 的插件。它具有垂直滚动,水平滚动 ,点击触发,划过触发和自动切换等效果。
图片展示:
兼容浏览器: IE6+/Firefox/Google Chrome
官方链接: 暂无
JS下载:http://www.ijquery.cn/js/tabBox.js
预览: http://www.ijquery.cn/study/demo/tabBox
打包下载: http://www.ijquery.cn/study/demo/tabBox/tabBox.zip
参数说明:
tabId:切换的标签父级容器
tabTag:切换的具体标签
conId:切换的内容父级容器
conTag:切换的具体内容容器
act:事件(click为鼠标点击,mouseover为鼠标经过)
effact:具体内容切换效果(scrolly为垂直滚动或者是上下滚动,scrollx为水平滚动或者左右滚动,slow为缓动效果,为空则无效果即为普通切换)
auto:是否自动切换(true 为自动 false不自动切换)
dft:设置起始显示序列从0开始数
JS代码:
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/tabBox.js" ></script>
<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>
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代码:
.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;}