So blenden Sie Element

Question

Dies ist mein Code. Wie kann ich die Registerkarten menu1Tabmenu2Tab versteckt statt Skript verwenden? Denn wenn ich die Seite aktualisiere, wird sie für 500ms oder so angezeigt.

Wenn Sie einen besseren Weg, um dies zu machen wissen, bitte helfen Sie mir.

$('#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

Arbeitsbeispiel:

$('#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" style="display:none;" href="#menu1" id="menu1Tab">Menu 1</a></li> 
 
<li><a data-toggle="tab" style="display:none;" href="#menu2" id="menu2Tab">Menu 2</a></li> 
 
<li><a data-toggle="tab" style="display:none;" 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 2

Warum nicht die Registerkarten eingestellt display: none im CSS zu sein, und dann ändern Sie einfach die CSS-Eigenschaft mit JQuery mit $().css("display", "block") und $().css("display", "none") auf dem Checkbox Status abhängig?

Answer 3

Ich denke, was Sie tun möchten, ist die Funktion bei Belastung auszulösen. Sie können das tun, indem Sie es in eine Funktion einfügen, die beim Laden der Seite alles darin ausführt.

$(function() { 
    $('#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(); 
      } 
    }); 
}); 

Answer 4

<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> 

Answer 5

Versuchen Code folgende

$('document').ready(function() { 
 
    $('#menu1Tab').hide() 
 
    $('#menu2Tab').hide() 
 
    $('#menu3Tab').hide() 
 

 
    $('#homeTab').on('click', function() { 
 

 

 
    $('#menu1Tab').show() 
 
    $('#menu2Tab').show() 
 
    $('#menu3Tab').show() 
 

 
    }); 
 
});

<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> 
 
    <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>