Question

在Twitter引导程序导航选项卡中加载timeline.js窗口小部件，打破选项卡式导航。

在下面的代码中，注释掉createStoryJS(config)，标签工作正常。

不要评论 - ＆gt;时间线正确加载，但标签导航中断。单击选项卡会在Firefox中显示TypeError: $(..).tab()不是函数错误（在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>

Answer 1

好的，我发现了一种似乎有用的解决方法。

而不是这样做：

$(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();

根本原因的解决方案会更好。

Timeline.js打破了Twitter引导选项卡

1 个答案: