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>