jQuery 頁面加載時隱藏 Div

Question

這是我的導航欄的代碼（忽略 the.hide() 垃圾郵件）

  function test(){
    var tabsNewAnim = $('#navbarSupportedContent');
    var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
    var activeItemNewAnim = tabsNewAnim.find('.active');
    var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
    var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
    var itemPosNewAnimTop = activeItemNewAnim.position();
    var itemPosNewAnimLeft = activeItemNewAnim.position();
    $(".hori-selector").css({
        "top":itemPosNewAnimTop.top + "px",
        "left":itemPosNewAnimLeft.left + "px",
        "height": activeWidthNewAnimHeight + "px",
        "width": activeWidthNewAnimWidth + "px"
    });
    $("#navbarSupportedContent").on("click","li",function(e){
        $('#navbarSupportedContent ul li').removeClass("active");
        $(this).addClass('active');
        var activeWidthNewAnimHeight = $(this).innerHeight();
        var activeWidthNewAnimWidth = $(this).innerWidth();
        var itemPosNewAnimTop = $(this).position();
        var itemPosNewAnimLeft = $(this).position();
        $(".hori-selector").css({
            "top":itemPosNewAnimTop.top + "px",
            "left":itemPosNewAnimLeft.left + "px",
            "height": activeWidthNewAnimHeight + "px",
            "width": activeWidthNewAnimWidth + "px"
        });
    });
}
$(document).ready(function(){
    setTimeout(function(){ test(); });
      $("#toggle1").click(function() {
    $("#panel1").show("slow");
     $("#panel2").hide();
      $("#panel3").hide();
       $("#panel4").hide();
        $("#panel5").hide();
  });

      $("#toggle2").click(function() {
    $("#panel1").hide()
     $("#panel2").show("slow");
      $("#panel3").hide();
       $("#panel4").hide();
        $("#panel5").hide();
  });

      $("#toggle3").click(function() {
    $("#panel1").hide()
     $("#panel2").hide()
      $("#panel3").show("slow");
       $("#panel4").hide();
        $("#panel5").hide();
  });

      $("#toggle4").click(function() {
    $("#panel1").hide()
     $("#panel2").hide()
      $("#panel3").hide()
       $("#panel4").show("slow");
        $("#panel5").hide();
  });

        $("#toggle5").click(function() {
    $("#panel1").hide()
     $("#panel2").hide()
      $("#panel3").hide()
       $("#panel4").hide()
        $("#panel5").show("slow");
  });
});
$(window).on('resize', function(){
    setTimeout(function(){ test(); }, 500);
});
$(".navbar-toggler").click(function(){
    $(".navbar-collapse").slideToggle(300);
    setTimeout(function(){ test(); });
});

當頁面加載時，我想隱藏 ID 為 #panel2、#panel3、#panel4 的 div... 我該怎么做？

或者，如果鏈接指向一個特定的 id，例如 href="#panel4" 並且我刷新頁面，那么除了#panel4 之外的所有 div 是否都被隱藏？

編輯 HTML 導航：

  <li class="nav-item active">
                    <a id="toggle1" class="nav-link" href="javascript:void(0);"><i class="fas fa-tachometer-alt"></i>My Link</a>
                </li>
                <li class="nav-item ">
                    <a id="toggle2" class="nav-link" href="javascript:void(0);"><i class="far fa-address-book"></i>Buttons</a>
                </li>
                <li class="nav-item">
                    <a id="toggle3" class="nav-link" href="javascript:void(0);"><i class="far fa-clone"></i>Background</a>
                </li>
                <li class="nav-item">
                    <a id="toggle4" class="nav-link" href="javascript:void(0);"><i class="far fa-calendar-alt"></i>Tracking</a>
                </li>
                <li class="nav-item">
                    <a id="toggle5" class="nav-link" href="javascript:void(0);"><i class="far fa-chart-bar"></i>Other</a>
                </li>

Answer 1

如果您想在 DOM 完成加載后立即隱藏它們，您可以使用DOMContentLoaded事件。

您還需要在代碼執行之前檢查DOMContentLoaded事件是否未觸發。 你可以用document.readyState做到這一點

使用 jQuery 您可以使用 .hide .hide()方法來隱藏元素。

您還可以顯示保持 url 中使用的錨點可見。 您可以使用window.location.href和正則表達式來獲取它。

const regex = /#.*/;
const url = window.location.href;
const anchor = url.match(regex)[0]

if(document.readyState === "complete") {
    $("#panel2, #panel3, #panel4").hide();
    $(anchor).show();
}else{
    window.addEventListener('DOMContentLoaded', (event) => {
        $("#panel2, #panel3, #panel4").hide();
        $(anchor).show();
    });
}

但是，您在看到元素時可能會有一點延遲。