1

我的引导选项卡工作正常，但 URL 构建错误，如下所示。我检查了许多站点，我的站点肯定是错误的。

如果我在http://domain.com/blog它显示我：

http://domain.com/#vote

代替

http://domain.com/blog/#vote

如果 Javascript 有加载问题，它仍然应该转到 Anchor 而不是 URL。

我的 HTML

<div class="nav nav-tabs" role="tablist">
    <a href="#vote" aria-controls="vote" role="tab" data-toggle="tab">
        {lang key="Votes" section="global"}
    </a>
</div>

<div role="tabpanel" class="tab-pane" id="vote">
    Votes
</div>

Javascript

// Tabs
$('.nav-tabs a').on('click', function (e) {
    e.preventDefault();
    $(this).tab('show');
   });
4

1 回答 1

1

如果这是您的所有 HTML 标记，那么您使用的 HTML 结构不正确。根据javascript bootstrap tabs 的文档。

我已经在我自己的本地主机上测试了以下内容，以及您的示例。使用正式版没有问题，而您在上面复制的内容有损坏的样式并且无法正常工作。

例子

<!-- start container for tabs, required -->
<div role="tabpanel">

    <!-- Nav tabs menu, required -->
    <ul class="nav nav-tabs" role="tablist">

        <!-- repeat the row below for extra menu items, 3x used in example -->
        <li role="presentation" class="active"><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">Tab1 title</a></li>
        <li role="presentation"><a href="#tab2" aria-controls="profile" role="tab" data-toggle="tab">Tab 2 title</a></li>
        <li role="presentation"><a href="#tab3" aria-controls="messages" role="tab" data-toggle="tab">Tab 3 title</a></li>

    <!-- close tabs menu -->
    </ul>

    <!-- start tab content panes container. do not forget this, required -->
    <div class="tab-content">

        <!-- repeating content pane. make sure that the id="xxxx" matches the href from the menu item -->
        <div role="tabpanel" class="tab-pane active" id="tab1">tab 1 content</div>
        <div role="tabpanel" class="tab-pane" id="tab2">tab 2 content</div>
        <div role="tabpanel" class="tab-pane" id="tab3">tab 3 content</div>

    <!-- close tab content panes -->
    </div>

<!-- close container for tabs -->
</div>
于 2015-01-11T13:44:17.620 回答