Question

我正在追踪不涉及网址更改的nav-tab，但显然标签会更改并显示相关信息。

我有一个angularjs网站，但每当网页刷新时，用户都会返回搜索页面。正常的Twitter引导程序nav-tabs更改了URL我不能使用它，但这是我想要做的事情。

问题是：

有没有人知道使用twitter bootstrap nav-tabs
如果没有，是否还有其他我可以使用的相同的内容

以下是我的代码剪切：

    <div class="row" data-ng-if="showcharts">
    <div class="col-md-12">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#productBreakdown" role="tab" data-toggle="tab"><span class="tabHeadings">Product breakdown</span></a></li>
            <li role="presentation" style="border-right: 1px solid lightgray; border-left: 1px solid lightgray"><a href="#assetsBreakdown" role="tab" data-toggle="tab"><span class="tabHeadings">Assets Breakdown</span></a></li>
            <li role="presentation"><a href="#nbBreakdown" role="tab" data-toggle="tab"><span class="tabHeadings">New Business Breakdown</span></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="productBreakdown">
                <donutchart id="product-breakdown" data-options="productbreakdownchart"></donutchart>
            </div>
            <div role="tabpanel" class="tab-pane" id="assetsBreakdown">
                <donutchart id="asset-breakdown" data-options="assetbreakdownchart"></donutchart>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">TO BE ADDED</div>
        </div>
    </div>
</div>

每个标签都会向用户显示一个信息图表。

Answer 1

正如您在评论中所说，由于href标记中的<a>属性，网址会发生变化。但您可以保留href空白使用data-target="..."属性。所以

<a href="#productBreakdown" role="tab" data-toggle="tab"></a>

将是

<a href data-target="#productBreakdown" role="tab" data-toggle="tab"></a>

Answer 2

按照您的建议，我认为我做得不错，但我无法使其正常工作！你知道这是怎么回事吗？

<div role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                  <a href data-target="#uploadTab"  role="tab" data-toggle="tab">Upload</a>
                </li>
                <li role="presentation">
                  <a href data-target="#browseTab"  role="tab" data-toggle="tab">Browse</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="uploadTab">upload Tab</div>
                <div role="tabpanel" class="tab-pane" id="browseTab">browseTab</div>
            </div>
        </div>

在不更改URL的情况下创建Twitter Bootstrap“nav-tabs”菜单 - 是否可能？

2 个答案: