javascript - Bootstrap Tab 实际页面的 URL 错误

Question

我的 Bootstrap 选项卡工作正常，但 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');
   });

Answer 1

如果这就是您的全部 HTML 标记，那么您使用的 HTML 结构不正确。根据documentation for 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>