gpt4 book ai didi

javascript - Timeline.js 破坏了 Twitter Bootstrap 选项卡

转载 作者:行者123 更新时间:2023-11-30 05:46:32 25 4
gpt4 key购买 nike

正在加载 timeline.js Twitter Bootstrap 导航选项卡内的小部件打破了选项卡式导航。

在下面的代码中,注释掉 createStoryJS(config) 选项卡就可以正常工作了。

不要注释掉 -> 时间线加载正确但选项卡导航中断。单击选项卡会出现 TypeError: $(..).tab() is not a function error in Firefox (same in chrome).

我怀疑是一个错误,但我可能在某处遗漏了一个选项。

代码:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="assets/jquery.min.js"></script>
<script src="assets/timeline/js/storyjs-embed.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

<script>
$(document).ready(function() {
$('#tabbar').tab();
$('#tabbar a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})

data =
{
"timeline":
{
"headline":"The Main Timeline Headline Goes here",
"type":"default",
"text":"<p>Intro body text goes here, some HTML is ok</p>",
"asset": {
"media":"http://yourdomain_or_socialmedialink_goes_here.jpg",
"credit":"Credit Name Goes Here",
"caption":"Caption text goes here"
},
"date": [
{
"startDate":"2011,12,10",
"endDate":"2011,12,11",
"headline":"Headline Goes Here",
"text":"<p>Body text goes here, some HTML is OK</p>",
"tag":"This is Optional",
"classname":"optionaluniqueclassnamecanbeaddedhere",
"asset": {
"media":"http://twitter.com/ArjunaSoriano/status/164181156147900416",
"thumbnail":"optional-32x32px.jpg",
"credit":"Credit Name Goes Here",
"caption":"Caption text goes here"
}
}
],
"era": [
{
"startDate":"2011,12,10",
"endDate":"2011,12,11",
"headline":"Headline Goes Here",
"text":"<p>Body text goes here, some HTML is OK</p>",
"tag":"This is Optional"
}

]
}
};

var config = {
type: 'timeline',
width: '800',
height: '600',
source: data,
embed_id: 'my-timeline'
};

createStoryJS(config);
});

</script>

<title></title>

</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="tabbar">
<li class="active"><a href="#entities">Entities</a></li>
<li><a href="#topics">Topics</a></li>
</ul>

<div class="tab-content">

<div class="tab-pane active" id="entities">

<div class="row-fluid">
1
<div id="my-timeline"></div>
</div>
</div>

<div class="tab-pane" id="topics">
<div class="row-fluid">
2
</div>
</div>
</div>
</div>

</div>
</body>
</html>

最佳答案

好的,我找到了一个似乎可行的解决方法。

而不是这样做:

$(this).tab('show');

在 onclick 处理程序中手动执行切换。

//the previously active tab
var prev = $('#tabbar .active a').attr("href");

//the tab we want to activate
var target = $(e.target).attr('href');

//deactivate the current tab
var p = $('#tabbar a[href="' + prev + '"]')
p.parent().removeClass('active');

//activate the new one
var n = $('#tabbar a[href="' + target + '"]');
n.parent().addClass('active');

//display the new one
$(prev).hide();
$(target).show();

不过,解决根本原因会更好。

关于javascript - Timeline.js 破坏了 Twitter Bootstrap 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17659448/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com