jQuery,Css 显示无 - 阻止与隐藏 - 显示

Question

我正在尝试隐藏#showMyList、#showMyName 这些 div。 单击按钮需要显示 div。 两个 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 个。