Jquery 仅在点击时显示 - 在加载和点击时不显示

Question

我一直在尝试让我的 div 每次点击都显示 - 这很有效......但是，我希望显示 Div1 - 但 Div2 和 Div3 隐藏，直到点击，当点击时，当前可见的 div 应该被隐藏。

 $(function(){ $("#tabs li a").click(function(){ $(".platform").hide(); var myDiv = $(this).attr("href"); $(myDiv).show(); }); });

 .platform { display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="tabs"> <li><a href="#tab1">PC</a></li> <li><a href="#tab2">PS4</a></li> <li><a href="#tab3">XBOX</a></li> </ul> <div class="platform tab1" id="tab1"> <div> platform 1 </div> </div> <div class="platform tab2" id="tab2"> <div> platform 2 </div> </div> <div class="platform tab3" id="tab3"> <div> platform 3 </div> </div>

我已经设法得到以下信息：在加载时显示所有内容，并且在注册点击之前不显示任何内容。 但是当我添加类时，onlick 似乎不起作用：

Show (display:block;)
hide (display:none;)

这可能是什么原因造成的？

我希望 tab1 在页面加载时显示，但选项卡 2 和选项卡 3 仅在单击时显示.....但这也隐藏了当前活动的 div。

onclick 还有其他方法吗？

Answer 1

只需在 css 中指定第一个选项卡。 JQuery 将添加它自己的 CSS，这将在点击时具有更高的特异性。

 $(function(){ $("#tabs li a").click(function(){ $(".platform").hide(); var myDiv = $(this).attr("href"); $(myDiv).show(); }); });

 .platform { display: none; }.platform.tab1 { /* <-- I added this */ display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="tabs"> <li><a href="#tab1">PC</a></li> <li><a href="#tab2">PS4</a></li> <li><a href="#tab3">XBOX</a></li> </ul> <div class="platform tab1" id="tab1"> <div> platform 1 </div> </div> <div class="platform tab2" id="tab2"> <div> platform 2 </div> </div> <div class="platform tab3" id="tab3"> <div> platform 3 </div> </div>

Answer 2

您可以使用show class 而不是使用 .hide( .hide()和.show() 。 将此包含在第一个选项卡的 class 中，然后在单击处理程序中更改它。

 $(function() { $("#tabs li a").click(function() { $(".platform.show").removeClass("show"); var myDiv = $(this).attr("href"); $(myDiv).addClass("show"); }); });

 .platform { display: none; }.platform.show { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="tabs"> <li><a href="#tab1">PC</a></li> <li><a href="#tab2">PS4</a></li> <li><a href="#tab3">XBOX</a></li> </ul> <div class="platform tab1 show" id="tab1"> <div> platform 1 </div> </div> <div class="platform tab2" id="tab2"> <div> platform 2 </div> </div> <div class="platform tab3" id="tab3"> <div> platform 3 </div> </div>