Bootstrap Tab错误的实际页面的URL

时间:2015-01-11 12:54:01

标签: javascript twitter-bootstrap bootstrap-tabs

我的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');
   });

1 个答案:

答案 0 :(得分:1)

如果这是您的所有HTML标记,那么您使用的是不正确的HTML结构。根据{{​​3}}。

我已经在我自己的localhost上测试了以下内容,以及您的示例。使用官方版本没有问题,而你上面复制的内容有一个破碎的样式,它没有正常工作。

示例

<!-- 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>