Twitter引导选项卡和javascript事件
我正在为一个项目使用twitter引导,特别是它的选项卡功能() 现在我有了这个小报,当我按下标签时,它会切换到每个单独标签的内容。但是,此内容已预加载到页面中(所有选项卡内容的html代码已经存在,您只能通过按选项卡更改可见性) 但是,我只想在按下某个选项卡时动态加载内容,这样就可以获得最新的数据,而不是加载整个页面时的数据 我计划为此使用jQuery。然而,我怎样才能使按下选项卡时调用某个jquery函数呢 我尝试在单击选项卡时显示警报(如果可以,jQuery函数也可以),但即使这样也不起作用:Twitter引导选项卡和javascript事件,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我正在为一个项目使用twitter引导,特别是它的选项卡功能() 现在我有了这个小报,当我按下标签时,它会切换到每个单独标签的内容。但是,此内容已预加载到页面中(所有选项卡内容的html代码已经存在,您只能通过按选项卡更改可见性) 但是,我只想在按下某个选项卡时动态加载内容,这样就可以获得最新的数据,而不是加载整个页面时的数据 我计划为此使用jQuery。然而,我怎样才能使按下选项卡时调用某个jquery函数呢 我尝试在单击选项卡时显示警报(如果可以,jQuery函数也可以),但即使这样也不起作
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
<script type="text/javascript">
$(function() {
$('.tabs').bind('click', function (e) {
e.target(window.alert("hello"))
});
});
</script>
$(函数(){
$('.tabs').bind('click',函数(e){
e、 目标(window.alert(“hello”))
});
});
和我的html:
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#tab1">tab 1</a></li>
<li><a href="#tab2">tab 2</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="tab1">
<h1>Tab1</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="tab2">
<h1>Tab2</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
- )
以及它使用的js文件:
使用click怎么样?像这样:
$('#.tabs').click(function (e) {
e.target(window.alert("hello"))
})
与选择器相关的语法有错误:
$('#.tabs') // should be ...
$('.tabs');
无序列表在HTML中有名为“tabs”的类,而您最初试图选择id为的元素
你也必须考虑manticore的建议。只能对表单元素使用“更改”
$(document).ready(function() {
$('.tabs').click(function(e) {
e.preventDefault();
alert('tab clicked!');
});
});
绑定似乎在DOM准备就绪之前运行。此外,您的选择器似乎已损坏,您只能在选定元素上绑定更改。您必须通过单击并实现一些逻辑来解决这个问题。试一试
$(function() {
$('.tabs').bind('click', function (e) {
e.target(window.alert("hello"))
});
});
更新
在查阅文档后,您的代码似乎只缺少DOM就绪部分,其余部分实际上不是一个bug,这意味着根据文档,以下内容应该可以工作:
$(function() {
$('.tabs').bind('change', function (e) {
// e.target is the new active tab according to docs
// so save the reference in case it's needed later on
window.activeTab = e.target;
// display the alert
alert("hello");
// Load data etc
});
});
造成混乱的是,插件覆盖了默认选择器,使#.tabs
有效,并向tab元素添加了一个更改事件。想想为什么他们认为这种语法是个好主意
不管怎样,您都可以尝试第二个示例,并说明是在更改选项卡之前还是之后触发警报
编辑:修复了由#引起的jquery异常。选项卡
选择器说:使用事件显示
有关Twitter引导选项卡事件的最新文档可在上找到。如果您使用的是2.3.2,但它不起作用,请尝试使用:
$(document).on("shown", 'a[data-toggle="tab"]', function (e) {
console.log('showing tab ' + e.target); // Active Tab
console.log('showing tab ' + e.relatedTarget); // Previous Tab
});
2.3.2标签的使用:
如果您正在使用版本3(当前为RC2),则文档将显示
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log('showing tab ' + e.target); // Active Tab
console.log('showing tab ' + e.relatedTarget); // Previous Tab
})
RC2选项卡用法:您可以在Bootstrap3中使用以下代码片段
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
var activatedTab = e.target; // activated tab
})
这个有效!但是,它现在会在显示新选项卡之前显示警报。如何才能使新选项卡先显示,然后显示警报?@Javaaaa很难说,请更新问题中的代码以反映当前的“工作”状态,在此之前触发警报。完成!我这样问是因为当我单击一个选项卡时,jqquery函数应该会得到一些数据,当它检索到这些数据时,就会用这些数据填充选项卡的div。与现在一样,它首先显示警报,只有当我单击“确定”时才会更改选项卡。检索数据是否也一样,它将等待数据被检索,然后才更改选项卡?@Javaaaa我在答案中添加了一些附加信息,尝试一下,然后回复结果,根据文档,应该可以。这根本不起作用$(“#.tabs”)在JQuery中导致异常,我尝试了所有组合-唯一有效的方法是绑定一个单击事件。如果您想将内容加载到属于该选项卡的列表中,可以使用$($(e.target.attr('href'))
(在事件处理程序中)来查找。有时,最好滚动到页面底部。谢谢在Bootstrap3中,您需要使用“show.bs.tab”而不是“show”来工作,除了它不会在文档加载时加载的第一个选项卡上触发之外?
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
var activatedTab = e.target; // activated tab
})