2

我的 index.html 中有几个标签，如下所示：

<div class="container">
    <div class="tabbable">
            <ul class="nav nav-pills nav-tabs">
                <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                <li><a href="#new" data-toggle="tab">New Request</a></li>
                <li><a href="#queuepane" data-toggle="tab">Queue</a></li>
            </ul>
        </div>
        <div id="appTabs" class="tab-content">
            <div id="home" class="tab-pane active"></div>
            <div id="new" class="tab-pane">
            <div id="queue" class="tab-pane"></div>
        </div>
     </div>
</div>

当使用 Backbone.js 路由单击选项卡时，我将如何更改 url？

4

2 回答 2

0

我使用我在网上找到的一些建议解决了这个问题。这是它在咖啡脚本中的外观：

在我的路由器的初始化函数中：

$('.tl-navigation-tabs a').click (e) =>
    e.preventDefault()
    @navigate("#{e.target.innerHTML}/", {replace: true, trigger: true})

Trigger: true 表示如果导航到的 url 与路由器中的路由匹配，它将委托给另一个函数。所以在这里我为每个选项卡都有一个路由，然后在通过该路由调用的函数内部：

$(".tl-navigation-tabs a[href='#Events']").tab('show')

可能有一种更优雅的方法可以做到这一点，但这最终完全按照我需要的方式工作。

于 2015-09-14T13:25:05.233 回答
0

请**使用 data-target 属性而不是 href 和

手动更改使用 Backbone.histroy.navigate('url',false);**

http://jsfiddle.net/sedhuait/4mxmtn0d/

http://getbootstrap.com/javascript/#tabs

 <li id="byNumberLi" role="presentation" class=""><a id="byNumberTabLink" data-target="#assignmentByNumberTabConent" data-toggle="tab" role="tab" ><span class="fa fa-list-alt"></span>List
                    By Number</a></li>
于 2015-10-06T07:52:16.290 回答