您的位置：首页 > Web前端 > JQuery

【JQuery UI】选项卡插件——tabs

2016-04-07 16:14 555 查看
个人认为这个插件很有用！

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容，它的调用格式如下：

$(selector).tabs({options});

selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。


例子：调用tabs()方法自定义加载显示的内容。

<body>
<div id="divtest">
<div id="tabs">
<ul>
<li><a href="#tabs-1">最爱吃的水果</a></li>
<li><a href="#tabs-2">最喜欢的运动</a></li>
</ul>
<div id="tabs-1">
<p>橘子</p>
<p>香蕉</p>
<p>葡萄</p>
<p>苹果</p>
<p>西瓜</p>
</div>
<div id="tabs-2">
<p>足球</p>
<p>散步</p>
<p>篮球</p>
<p>乒乓球</p>
<p>骑自行车</p>
</div>
</div>
</div>

<script type="text/javascript">
$(function () {
$("#tabs").tabs({
//设置各选项卡在切换时的动画效果
fx: { opacity: "toggle", height: "toggle" },
event: "mousemove" //通过移动鼠标事件切换选项卡
})
});
</script>
</body>

其中

属性fx: { opacity: "toggle", height: "toggle" },表示：

切换时，标题对应的内容以淡入淡出的滑动效果显示或隐藏。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航