jQuery ,Css 显示 none - 块与隐藏 - 显示

Question

我试图隐藏#showMyList、#showMyName 这些 div。单击按钮需要显示 divs。 div 都有单独的按钮。我想一次看一个div。我可以给他们不同的css（样式），这样他们看起来就会不一样。

哪个更有用jQuery hide() 和 show() 还是显示 none 并屏蔽？

#showMyList, #showMyName{
            height: 100px;
            width: 500px;
            text-align: center;
            border: 1px solid gray;
            background-color: antiquewhite;
            position: absolute;
            top: 200px;
            left:200px;
        }
    </style> 
    <script>
        $('document').ready(function(){
           $('showMyList').css("display", "none");
            $('showMyAcc').css("display","none");
            $("myList").click(function(){
                $("showMyList").css("display", "block");
                $("myAcc").click(function(){
                  $("showMyAcc").css("display", "block");  
                });
            });
        });

Answer 1

考虑以下示例。

$(function() {
  $('#showMyList, #showMyAcc').hide();
  $("#myList").click(function() {
    $("#showMyAcc").hide();
    $("#showMyList").show();
  });
  $("#myAcc").click(function() {
    $("#showMyList").hide();
    $("#showMyAcc").show();
  });
});

#showMyList,
#showMyAcc {
  height: 100px;
  width: 500px;
  text-align: center;
  border: 1px solid gray;
  background-color: antiquewhite;
  position: absolute;
  top: 200px;
  left: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myList">Show List</button>
<button id="myAcc">Show Name</button>
<div id="showMyList">List</div>
<div id="showMyAcc">Name</div>

您可以隐藏两个元素，然后一次显示或显示 1 个。

jQuery ,Css 显示 none - 块与隐藏 - 显示

jQuery ,Css display none - block vs. hide- show

javascript

css

jquery

hide

display