复选框和选项卡（代码几乎完成）答案

【问题标题】：Checkboxes and Tabs (Code almost complete)复选框和选项卡（代码几乎完成）
【发布时间】：2017-10-11 17:15:31
【问题描述】：

如果选择了正确的复选框，我正在尝试让选项卡出现和消失。

我的代码可以工作，但是当我刷新页面或加载页面时，选项卡会出现 0.5 秒然后消失。可能是脚本延迟，但我该如何删除它？我想启动 webAdmin、webCSR、webClient hidden 并使用复选框显示/隐藏。

https://i.gyazo.com/8ff29fe1679a89fd4e215f98ba71375d.png

我的 HTML：

  //Start web* hidden
    $('#tab-webCSR').hide();
    $('#tab-webAdmin').hide();
    $('#tab-webClient').hide();
    //Hide/Show Branch tabs
    $('#hasWebCSR').change(function() {
            if($(this).is(":checked")) {
                $('#tab-webCSR').show();
            }
            else {
                $('#tab-webCSR').hide();
            }
    });
    $('#hasProfile7').change(function() {
        if($(this).is(":checked")) {
            $('#tab-profile7').show();
        }
        else {
            $('#tab-profile7').hide();
        }
    });
    $('#hasWebAdmin').change(function() {
        if($(this).is(":checked")) {
            $('#tab-webAdmin').show();
        }
        else {
            $('#tab-webAdmin').hide();
        }
    });
    $('#hasWebClient').change(function() {
        if($(this).is(":checked")) {
            $('#tab-webClient').show();
        }
        else {
            $('#tab-webClient').hide();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
                    <label>Deploy Apps:</label>
                    <div class="well">
                        <div class="checkbox">
                            <label><input type="checkbox" checked id="hasProfile7" name="hasProfile7">Profile7</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="hasWebCSR" name="hasWebCSR">WebCSR</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="hasWebAdmin" name="hasWebAdmin">WebAdmin</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="hasWebClient" name="hasWebClient">WebClient</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <label>GitLab Branches:</label>
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" id="tab-profile7" href="#profile7">Profile7</a> </li>
                        <li><a data-toggle="tab" id="tab-webCSR" href="#webCSR">WebCSR</a></li>
                        <li><a data-toggle="tab" id="tab-webAdmin" href="#webAdmin">WebAdmin</a></li>
                        <li><a data-toggle="tab" id="tab-webClient" href="#webClient">WebClient</a></li>
                    </ul>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果您将选项卡的可见性设置为默认隐藏可能会有所帮助。我在您的标签中添加了样式display: none;。但是你必须在启动时初始化一次可见性。

  //Start web* hidden
    $('#tab-webCSR').hide();
    $('#tab-webAdmin').hide();
    $('#tab-webClient').hide();
    //Hide/Show Branch tabs
    $('#hasWebCSR').change(function() {
            if($(this).is(":checked")) {
                $('#tab-webCSR').show();
            }
            else {
                $('#tab-webCSR').hide();
            }
    });
    $('#hasProfile7').change(function() {
        if($(this).is(":checked")) {
            $('#tab-profile7').show();
        }
        else {
            $('#tab-profile7').hide();
        }
    });
    $('#hasWebAdmin').change(function() {
        if($(this).is(":checked")) {
            $('#tab-webAdmin').show();
        }
        else {
            $('#tab-webAdmin').hide();
        }
    });
    $('#hasWebClient').change(function() {
        if($(this).is(":checked")) {
            $('#tab-webClient').show();
        }
        else {
            $('#tab-webClient').hide();
        }
    });

<style>
  .nav-tabs li a {
    display: none;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
                    <label>Deploy Apps:</label>
                    <div class="well">
                        <div class="checkbox">
                            <label><input type="checkbox" checked id="hasProfile7" name="hasProfile7">Profile7</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="hasWebCSR" name="hasWebCSR">WebCSR</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="hasWebAdmin" name="hasWebAdmin">WebAdmin</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="hasWebClient" name="hasWebClient">WebClient</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <label>GitLab Branches:</label>
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" id="tab-profile7" href="#profile7">Profile7</a> </li>
                        <li><a data-toggle="tab" id="tab-webCSR" href="#webCSR">WebCSR</a></li>
                        <li><a data-toggle="tab" id="tab-webAdmin" href="#webAdmin">WebAdmin</a></li>
                        <li><a data-toggle="tab" id="tab-webClient" href="#webClient">WebClient</a></li>
                    </ul>

【讨论】：

【解决方案2】：

在<ul> 标记中添加style="display:none;"，并在JavaScript 代码的开头添加以下内容：$(".nav-tabs").show() ;

或者您可以简单地将style="display:none;" 添加到要在页面加载时隐藏的<li> 标记

【讨论】：