jQuery，Css显示none--块与隐藏--显示。

Question

我想隐藏#showMyList, #showMyName这些divs，点击按钮时需要显示divs。点击按钮时需要显示divs.两个div都有单独的按钮。我希望一次只看到一个div。我可以给他们不同的CSS（样式），使他们看起来不同。

哪种方法更有用jQuery hide()和show()还是display none和block？

#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的时间。