选项卡仅在加载时显示过多内容，点击后自行修复

Question

我在 Bootstrap 模式中设置了一个选项卡，它加载选项卡 2 的内容，显示在选项卡 1 的内容正下方，但我终究无法弄清楚为什么。我知道这不是模态问题，也不是 php 失误，因为在删除大部分内容后，我能够在此 fiddle 中重现问题。

现在奇怪的是，一旦您单击另一个选项卡，整个事情就会正常进行。没有额外的内容，即使您返回选项卡 1。

这是我的代码的简化版本：

$(document).ready(function () {

        $('ul.tabs li').click(function () {
            var tab_id = $(this).attr('data-tab');

            $('ul.tabs li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#" + tab_id).addClass('current');
        })

    })

ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-size: 1em;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
}

ul.tabs li {
    background: none;
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

ul.tabs li.current {
    background: #eaeaea;
    color: #222;
    border-radius: 5px 5px 0 0;
}

.tab-content {
    display: none;
    background: #eaeaea;
    padding: 15px;
    font-size: 1em;
    font-family: 'Roboto Condensed', sans-serif;
    border-radius: 5px 0 5px 5px;
}

.tab-content.current {
    display: block;
    overflow: auto;
    width: 100%;
    margin-bottom: 20px;
    min-height: 300px;
}

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="jobModalLabel"><strong>Job 123</strong></h4>
</div>
<div class="modal-body">
   body is here....Tabs down below-

    <!--Tabs-->
    <div class="col-lg-12">
        <br/>
        <ul class="tabs text-right">
            <li class="tab-link current" data-tab="tab-1">Outlook</li>
            <li class="tab-link" data-tab="tab-2">Parts On Order</li>
            <li class="tab-link" data-tab="tab-3">Labor</li>
            <li class="tab-link" data-tab="tab-4">Parts</li>
            <li class="tab-link" data-tab="tab-5">Notes</li>
        </ul>

        <div id="tab-1" class="tab-content current">
            Tab 1 Conent
        </div>

        <div id="tab-2" class="tab-content current">
            Tab 2 content
        </div>
        <div id="tab-3" class="tab-content">
            Tab 3 content
        </div>
        <div id="tab-4" class="tab-content">
            Tab 4 Content            
        </div>
        <div id="tab-5" class="tab-content">
            Tab 5 content
        </div>
        <!--/Tabs-->
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <a href="editjob.php?id=<?php echo $id; ?>">
            <button type="button" class="btn btn-warning pull-left">Edit Job</button>
        </a>
        <a href="printjob.php?id=<?php echo $id; ?>">
            <button type="button" class="btn btn-primary">Print Job</button>
        </a>
    </div>

有什么可能导致这种情况的想法吗？

Answer 1

单击处理程序确定单击选项卡时发生的情况，但不会立即运行。

您可以通过在定义点击处理程序后显式触发第一个选项卡上的点击来解决此问题：

$(document).ready(function () {
  $('ul.tabs li')
    .click(function () {
      var tab_id = $(this).attr('data-tab');

      $('ul.tabs li').removeClass('current');
      $('.tab-content').removeClass('current');

      $(this).addClass('current');
      $("#" + tab_id).addClass('current');
    })
    .first()
    .click();
});

Working Fiddle

Answer 2

您已将 "current" class 指定给 tab-1 和 tab-2。将其从tab-2中移除，即可正确显示。

Fiddle

    <div id="tab-1" class="tab-content current">
    ...
    <div id="tab-2" class="tab-content">

选项卡仅在加载时显示过多内容，点击后自行修复

Tabs show too much content only on load, self fixes after click

javascript

jquery

tabs