Question

我正在尝试实现一个html选项卡式界面。出于某种原因，单击选项卡会将我踢回主页，而不是显示新的数据列表。我是否需要添加到<a href>的网址路由？

<ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#overview" role="tab" data-toggle="tab">Overview</a></li>
        <li role="presentation"><a href="#documents" role="tab" data-toggle="tab">Documents</a></li>
        <li role="presentation"><a href="#punchlist" role="tab" data-toggle="tab">List</a></li>
    </ul>
 <div id="mainBody">
    <div class="tab-content">
        <div class="tab-pane active" id="overview">
            <div role="tabpanel">
               DATA 1
            </div>
        </div>
       <div class="tab-pane" id="documents">
            <div role="tabpanel">
               DATA 2
            </div>
        </div>
       <div class="tab-pane" id="punchlist">
            <div role="tabpanel">
               DATA 3
            </div>
        </div>
     </div>
 </div>

Answer 1

如果你的意思是你只是想显示标签的内容，那么我会改变你的href =＆＃34;＃something＆＃34; to href =＆＃34; javascript：return false;＆＃34;或者将代码放在事件处理程序中。

Answer 2

在Bootply上测试了这个

http://www.bootply.com/DqUJfu6r4z

您只需关闭ID上的引文：

<ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#overview" role="tab" data-toggle="tab">Overview</a></li>
        <li role="presentation"><a href="#documents" role="tab" data-toggle="tab">Documents</a></li>
        <li role="presentation"><a href="#punchlist" role="tab" data-toggle="tab">List</a></li>
    </ul>
 <div id="mainBody">
    <div class="tab-content">
        <div class="tab-pane active" id="overview">
            <div role="tabpanel">
               DATA 1
            </div>
        </div>
       <div class="tab-pane" id="documents">
            <div role="tabpanel">
               DATA 2
            </div>
        </div>
       <div class="tab-pane" id="punchlist">
            <div role="tabpanel">
               DATA 3
            </div>
        </div>
     </div>
 </div>

html标签回到主页而不是显示新数据

2 个答案: