javascript - 如何隐藏元素

Question

这是我的代码。如何隐藏标签 menu1Tab menu2Tab menu3Tab 而不是使用脚本？因为当我刷新页面时，它会显示 500 毫秒或类似时间。

如果你们知道更好的方法，请帮助我。

$('#menu1Tab').hide();
$('#menu2Tab').hide();
$('#menu3Tab').hide();


$('#menu1toggle').change(function() {
        if($(this).is(":checked")) {
            $('#menu1Tab').show();
        }
        else {
            $('#menu1Tab').hide();
        }
    });
    
    $('#menu2toggle').change(function() {
        if($(this).is(":checked")) {
            $('#menu2Tab').show();
        }
        else {
            $('#menu2Tab').hide();
        }
    });


$('#menu3toggle').change(function() {
        if($(this).is(":checked")) {
            $('#menu3Tab').show();
        }
        else {
            $('#menu3Tab').hide();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
  
  <div class="checkbox">
      <label><input type="checkbox" id="menu1toggle" checked>Menu 1</label>
  </div>
   <div class="checkbox">
      <label><input type="checkbox" id="menu2toggle">Menu 2</label>
  </div>
   <div class="checkbox">
      <label><input type="checkbox" id="menu3toggle">Menu 3</label>
  </div>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home" id="homeTab">Home</a></li>
    <li><a data-toggle="tab" href="#menu1" id="menu1Tab">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2" id="menu2Tab">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3" id="menu3Tab">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

Answer 1

 <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" id="homeTab">Home</a></li>
<li style="display:none;"><a data-toggle="tab" href="#menu1" id="menu1Tab">Menu 1</a></li>
<li style="display:none;"><a data-toggle="tab" href="#menu2" id="menu2Tab">Menu 2</a></li>
<li style="display:none;"><a data-toggle="tab" href="#menu3" id="menu3Tab">Menu 3</a></li>