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