為什么我的Ajax回應會顯示在我的導航欄上？ -有解無憂

每當我滾動滑鼠的時候，所有列出的管理卡都會出現在導航欄上。這是一個非常惱人的缺陷，我似乎不明白我在哪里出了問題。如果有任何幫助，我將不勝感激。謝謝！

。

#mainsec {
  height: 100vh;
  width: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#navv {
  background-color: #333; /* 黑色背景色 */
  position: fixed; /* Make it stick/fixed */
  top: 0; /* 留在頂部 */
  width: 100%; /* 全幅 */
  transition: top 0.3s; /* 下滑（和上滑）時的過渡效果 */
}

#navv a：hover {
  background-color: rgba（221, 221, 221, 0.568）。
  color: black;
}

<!DOCTYPE html> 
<html lang="en"/span>>
<head>/span>
  <!-- 必要的元標簽-->
  <meta charset="utf-8"/span> />
  < meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <!-- Bootstrap CSS -->
  < link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" /> 
  < link rel="styleheet" type="text/css" href=" 。 ./../css/admin_dash.css">

  < nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navv"> 
    <div class="container-fluid"/span>>
      < a class="navbar-brand" href="#"> 
        <img src="././assets/logo. png" alt="" width="30" height 高度="24" class="d-line-block align-text-top">  Phemesoft
      </a> 
      < button class="navbar-toggler"  type="button" data-bs-toggle="collapse" data-bs- target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"/span>> 
            <span class="navbar-toggler-icon"/span>> </span>>
          </button> 
      < div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
        <div class="navbar-nav">/span>
          < a class="nav-link active" aria-current="page" href="#sec1"/span>> Admins</a>。
          <a class="nav-link" href="#sec2"> 管理管理員</a> 
          <a class="nav-link" href="#sec3" /span>> 課程內容</a> 
          < a class="nav-link disabled"  href="#" tabindex="-1" aria-disabled="true"> Disabled</a> 
        </div>/span>
      </div>/span>
    </div>/span>
  </nav> 
  <div class="container"> 
    <div class="column"> 
      <div id="sec1"> 
        < div class="row" id="mainsec">/span>
          <div class="col-sm-6"/span>>
            <h2>/span>Admins</h2>/span>
          </div>/span>
          <div class="col-sm-6"> 
            <div class="row"> 
              <div class="col-sm-5 cards-wrapper"/span>> </div>>
            </div>/span>
          </div>/span>
        </div>/span>
      </div>/span>
      <div id="sec2"> 
        < div class="row" id="mainsec">
          <div class="col-sm-6">/span>
            <h1>用戶到管理員</h1>/span>
          </div>/span>
          <div class="col-sm-6"> 
            < form class="form" action="makeadmin" method="POST"> 
              輸入電子郵件。
              < input type="email" placeholder="Email" name="email"> 
              < button type="submit"/span> class="btn btn-light"/span>> 檢查</button>。
            </form>/span>
          </div>/span>
        </div>/span>
      </div>/span>
      <div id="sec3"> 
        < div class="col-sm-6" id="mainsec"> 
          <h1>添加課程內容</h1> 
        </div>/span>
      </div>/span>
    </div>/span>
  </div>/span>
  < script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"/span> crossorigin="anonymous"/span>> </script>>
  <script src="https://ajax. googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>/span>
  <script>.
    $.ajax（{
      url: "listadmins"/span>,
      type: "GET"。
      success: function(response) {
        var $results = $(".card-wrapper") 。
        for (var a = 0; a < response.length; a  ) {
          // console.log(response[a].Name);
          $results.append(
            '<div class="card"><div class="card-body"><h6 class="card-title">'/span>  
            回應[a].Name  
            '</h6></div></div>' 
          );
        }
      }
    });
  </script> 
  <script>
    var prevScrollpos = window.pageYOffset。
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset。
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("navv"/span>)。 style.top = "0"。
      } else {
        document.getElementById("navv") 。 style.top = "-50px"。
      }
      prevScrollpos = currentScrollPos。
    };
  </script>>
  </body> 
</html>/span>

這里有一個問題的影像。

uj5u.com熱心網友回復：

這與ajax沒有直接關系，而是與頁面的其他部分有關。

你的HTML是無效的

。

head標簽未關閉
head標簽沒有關閉
body標簽沒有打開

mainsec

其他一些無效的標記

很難看到這里的問題，所以我為這個網站稍微調整了一下尺寸

。

現在我們得到了這個結果，你可以用mt-5 pt-4隨意調整頂部的邊距和填充，玩弄一下這個，看看你能把東西移到哪里。

。

span class="hljs-selector-class">.mainsec {
  height: 5em;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#navv {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  transition: top 0.3s;
}

#navv a：hover {
  background-color: rgba（221, 221, 221, 0.568）。
  color: black;
}

<!DOCTYPE html> 
<html lang="en"/span>>

<head>/span>
  <meta charset="utf-8" />
  < meta name="viewport" content="width=device-width, initial-scale=1" /> 
  < link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" /> 
  < link rel="styleheet" type="text/css" href=" 。 ./../css/admin_dash.css">
</head> 

<body> 
  < nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navv"/span>> 
    <div class="container-fluid"/span>>
      < a class="navbar-brand" href="#"> 
        <img src="././assets/logo. png" width="30" height="24" class attr">class="d-line-block align-text-top" alt="Phemesoft logo"> 
      </a>/span>
      < button class="navbar-toggler"  type="button" data-bs-toggle="collapse" data-bs- target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"/span>> 
            <span class="navbar-toggler-icon"/span>> </span>>
          </button> 
      < div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
        <div class="navbar-nav">/span>
          < a class="nav-link active" aria-current="page" href="#sec1"/span>> Admins</a>。
          <a class="nav-link" href="#sec2"> 管理管理員</a> 
          <a class="nav-link" href="#sec3" /span>> 課程內容</a> 
          < a class="nav-link disabled"  href="#" tabindex="-1" aria-disabled="true"> Disabled</a> 
        </div>/span>
      </div>/span>
    </div>/span>
  </nav> 
  <div class="container mt-6"/span>>
    <div class=">
      <div id="sec1"> 
        <div class="mainsec mt-5"/span>>
          <div class="col-sm-3"/span>>
            <h2>/span>Admins</h2>/span>
          </div>/span>
          <div class="col-sm-7 mt-5 pt-4"/span>>
            <div class="row"> 
              <div class="col-sm-8 cards-wrapper">/span>
                <div class="card-wrapper">/span>
                  <div class="card">/span>
                    <div class="card-body"/span>>
                      <h6 class="card-title">Pretend append
                      </h6>/span>Pretend append
                    </div>/span>
                  </div>/span>
                  <div class="card"> 
                    <div class="card-body"/span>>
                      <h6 class="card-title">Pretend append
                      </h6>/span>Pretend append
                    </div>/span>
                  </div>/span>
                </div>/span>
              </div>/span>
            </div>/span>
          </div>/span>
        </div>/span>
      </div>/span>
      < div class="row" id="sec2">
        <div class="row mainsec"/span>>
          <div class="col-sm-6">/span>
            <h1>用戶到管理員</h1>/span>
          </div>/span>
          <div class="col-sm-6"> 
            < form class="form" action="makeadmin" method="POST"> 
              輸入電子郵件。
              < input type="email" placeholder="Email" name="email"> 
              < button type="submit"/span> class="btn btn-light"/span>> 檢查</button>。
            </form>/span>
          </div>/span>
        </div>/span>
      </div>/span>
      < div class="row" id="sec3">
        <div class="col-sm-6 mainsec"/span>>
          <h1>添加課程內容</h1> 
        </div>/span>
      </div>/span>
    </div>/span>
  </div>/span>
  < script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"/span> crossorigin="anonymous"/span>> </script>>
  <script src="https://ajax. googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>/span>
  <script>.
    $.ajax（{
      url: "listadmins"/span>,
      type: "GET"。
      success: function(response) {
        var $results = $(".card-wrapper") 。
        for (var a = 0; a < response.length; a  ) {
          $results.append(
            '<div class="card"><div class="card-body"><h6 class="card-title">'/span>  
            回應[a].Name  
            '</h6></div></div> '
          );
        }
      }
    });

    var prevScrollpos = window.pageYOffset。
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset。
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("navv"/span>)。 style.top = "0"。
      } else {
        document.getElementById("navv") 。 style.top = "-50px"。
      }
      prevScrollpos = currentScrollPos。
    };
  </script>>
</body> 

</html>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/323831.html

標籤：

上一篇：把所有以#WAV開頭的行都替換成單行，記事本

下一篇：Pandas：字典型別中的重復鍵和轉置矩陣