一般动作
登录
Wiki: BROPEN ▼: Document Index
»
Space: FAQ ▼: Document Index
»
Page: JQuery UI的页签（tabs）组件中，如何拦截页签点击事件，并添加其他功能（如重定向到其他页面）
搜索
zh
页面动作
导出 ▼: 以PDF格式导出 以RTF格式导出 以HTML格式导出
更多动作 ▼: 打印预览 察看源码
欢迎进入Wiki » FAQ » JQuery UI的页签（tabs）组件中，如何拦截页签点击事件，并添加其他功能（如重定向到其他页面）?

# JQuery UI的页签（tabs）组件中，如何拦截页签点击事件，并添加其他功能（如重定向到其他页面）?

在2013-11-26 10:32上被李小翔修改
评论 (0) · 附件 (0) · 记录 · 信息

供稿人：刁隆

一般情况下，页签组件中的每个页签都是一个容器，ajax或非ajax的，但开发过程中，可能需要页签中添加一些其他功能，比如点击页签跳转到一个新页面。可以通过对事件 beforeActivate 的拦截来实现。

如下例所示，点击靠右的页签 bar 时，将页面重定向到了一个新的地址：

<script type="text/javascript">
$j(function() { $j("#tabs").tabs({
// 监控 beforeActivate 事件
beforeActivate: function(event, ui) {
if ( $j(ui.newTab.context).attr("href") == "jump" ) {
location = "http://www.bing.com";
return false; // 返回 false，取消激活
}
}
})})
</script>
<div id="tabs">
<ul>
<li><a href="#tab1">foo</a></li>
<li style="float:right"><a href="jump">bar</a></li>
</ul>
<div id="tab1>normal tab</div>
</div>

这段代码中：

- 定义tab时（li > a），设置一个特殊的 href 属性（也可以是其他任何东西）
- 在事件 beforeActive 中，捕获该属性、执行自定义代码、返回false

附：tabs的一些属性、事件、方法及技巧

标签： jqueryui tabs
在2013-11-26 10:31上被李小翔创建

- 评论 （0）
- 附件 （0）
- 记录
- 信息

# 快速链接

- 首页
- 新闻动态
- FAQ

Copyright © 2013 北京博瑞开源软件有限公司
京ICP备12048974号