Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

为什么不在CSS中将标签设置为display: none，然后根据复选框状态使用$().css("display", "block")和$().css("display", "none")更改带有Jquery的CSS属性？

Answer 3

工作示例：

＆＃13;

date +%y.%m

＆＃13;

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

＆＃13;

Answer 4

我认为您要做的是在加载时触发功能。你可以把它放在一个在页面加载时运行其中所有内容的函数中。

$(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 5

尝试以下代码

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

如何隐藏元素

5 个答案: