javascript - 使用 BootStrap 选项卡

Question

我在使用 Bootstrap 选项卡时遇到了一些问题。加载页面时，第一个选项卡应该处于事件状态，但当单击其他选项卡时，它加载到与其余内容不同的位置，并且当单击返回主选项卡时，内容不会出现。

Content doesn't appear in top left corner

另外，当点击另一个标签时，内容显示在屏幕的左下角。

Like this

如何让我的选项卡内容始终显示在选项卡 Pane 的左上角，并让我的第一个选项卡内容在单击返回时始终加载？

这是我的标签代码:

<form [formGroup]="form">
<div class="form-component-container">
    <div class="panel panel-default form component main">
        <div class="panel-heading">
            <ul id="rowTab" class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
                <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
                <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
                <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
                <li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
                <li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
            </ul>
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade active in">
                    <p>Tab 1 inner</p>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <p>Tab 2 inner</p>
                </div>
                <div id="tab3" class="tab-pane fade">
                    <p>Tab 3 inner</p>
                </div>
                <div id="tab4" class="tab-pane fade">
                    <p>Tab 4 inner</p>
                </div>
                <div id="tab5" class="tab-pane fade">
                    <p>Tab 5 inner</p>
                </div>
                <div id="tab6" class="tab-pane fade">
                    <p>Tab 6 inner</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您的代码工作正常，检查 jsfiddle https://jsfiddle.net/bsuqoryd/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form [formGroup]="form">
<div class="form-component-container">
    <div class="panel panel-default form component main">
        <div class="panel-heading">
            <ul id="rowTab" class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
                <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
                <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
                <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
                <li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
                <li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
            </ul>
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade active in">
                    <p>Tab 1 inner</p>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <p>Tab 2 inner</p>
                </div>
                <div id="tab3" class="tab-pane fade">
                    <p>Tab 3 inner</p>
                </div>
                <div id="tab4" class="tab-pane fade">
                    <p>Tab 4 inner</p>
                </div>
                <div id="tab5" class="tab-pane fade">
                    <p>Tab 5 inner</p>
                </div>
                <div id="tab6" class="tab-pane fade">
                    <p>Tab 6 inner</p>
                </div>
            </div>
        </div>
    </div>
</div>

您可能缺少库文件或库文件的顺序有误。检查控制台是否有错误。

在代码中我提到了所需库文件的顺序。

再来一个 jsfiddle https://jsfiddle.net/bsuqoryd/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form [formGroup]="form">
<div class="form-component-container">
    <div class="panel panel-default form component main">
        <div class="panel-heading">
            
            <div class="tab-content">
                <div id="tab1" class="tab-pane fade active in">
                    <p>Tab 1 inner</p>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <p>Tab 2 inner</p>
                </div>
                <div id="tab3" class="tab-pane fade">
                    <p>Tab 3 inner</p>
                </div>
                <div id="tab4" class="tab-pane fade">
                    <p>Tab 4 inner</p>
                </div>
                <div id="tab5" class="tab-pane fade">
                    <p>Tab 5 inner</p>
                </div>
                <div id="tab6" class="tab-pane fade">
                    <p>Tab 6 inner</p>
                </div>
            </div>
            <ul id="rowTab" class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
                <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
                <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
                <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>
                <li><a data-toggle="tab" href="#tab5">Tab 5</a></li>
                <li><a data-toggle="tab" href="#tab6">Tab 6</a></li>
            </ul>
        </div>
    </div>
</div>