如何用JavaScript在div標簽中加載HTML -有解無憂

我只是在練習制作一個大學網站。在正文中有3個標簽，一個是<header>，第二個是div，第三個是footer。我在另一個about.html中有一些HTML，沒有<body>和<head>tags。在我的style.css檔案中，我為about.html做了樣式。我只想做一件事，那就是每當我點擊 "關于 "時，它就把代碼替換成<div id="content"></div>，這是在about.html中。如何使用JavaScript在<div>中加載一個HTML頁面？

。

注意：片段中提供的CSS不是回應式的。我想決定做好這一步，而不是前進到回應式
。

下面是我想用片段中的代碼來替換的代碼。

<section id="home"> 
    <div class="main"> 
        <h1 class="幻燈片"> 最大的</h1> 
        <h1 class=" slide"> 教育</h1> 
        <h1 class="幻燈片"> 網路</h1> 
        <h1 class="幻燈片"> Punjab集團</h1> 
        <h1 class=" slide"> 學院的</h1>。
        <h1 class=" slide"> 哈菲扎巴德</h1>>
    </div>/span>
    <div class="swipe"> 
        <img src=" 。 /PGC_Stock/chevron-down.svg" alt="swipe"> 
    </div>/span>
</section>/span>
<section id="team"> 
    <div class="card-container"/span>>
        < div class="card" id="card-1">/span>
            <img src=" 。 /PGC_Stock/ADMIN/khizar_abbas_sqr.jpg" alt="khizar_abbas"> 
            <div> 
                <h1 class="name"/span>> Khizar Abbas</h1>。
                <p class="status"/span>> 在PGC-Hafizabad的IT經理</p>
            </div>/span>
        </div>/span>
        < div class="card" id="card-2">
            <img src=" 。 /PGC_Stock/ADMIN/hafiz_fahad_sqr.jpg" alt="hafiz_fahad"> 
            <div> 
                <h1 class="name"/span>> 哈菲茲-法赫德</h1>>
                <p class="status"/span>> Principal At PGC-Hafizabad</p>/span>
            </div>/span>
        </div>/span>
        < div class="card" id="card-3">/span>
            <img src=" 。 /PGC_Stock/ADMIN/salman_butt.jpg" alt="salman_butt"> 
            <div> 
                <h1 class="name"/span>> Salman Butt</h1>/span>
                <p class="status"/span>> 副校長在PGC-Hafizabad</p> 
            </div>/span>
        </div>/span>
        < div class="card" id="card-5">/span>
            <img src=" 。 /PGC_Stock/ADMIN/mian_afzal-scaled_sqr.jpg" alt="mian-afzal"> 
            <div> 
                <h1 class="name"/span>> Sohail Afzal</h1> 
                <p class="status"/span>> 執行董事PGC</p>/span>
            </div>/span>
        </div>/span>
        < div class="card" id="card-4">/span>
            <img src=" 。 /PGC_Stock/ADMIN/mianamer_sqr.jpg" alt="mian-amer"> 
            <div>/span>
                <h1 class="name"/span>> Mian Amer Mahmood</h1> 
                <p class="status"/span>> 主席PGC</p> 
            </div>/span>
        </div>/span>
    </div>/span>
</section>

顯示代碼片段

：root {
  --藍色-顏色。#2c2b6f;
  --紅色-color: #e13a27;
  --red_2_color: #e13b28;
  --blue_2-color: #2c2b6d;
  --white-color: #ffffff;
  --font-light: GalanoGrotesque;
  --font-bold: GalanoGrotesque-Bold。


* {
  font-family: var(--font-light);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: var(-white-color);
  background-color: var(-blue-color)。
}


/* Styling NavBar */ 樣式。

#navbar {
  position: relative;
  display: flex;
  width: 100%;
  height: 75px;
  align-items: center;
  justify-content: space-between;
  min-width: 100%;
}

#navbar:before {
  content: "";
  position: absolute;
  min-width: 100%;
  background-color: var（--red_2_color）。
  z-index: -1;
  height: 100%。
}


/* 樣式標識 */

.logo {
  margin-left: 10px;
  width: 120px;
}


/* Styling Nav-Links */: */

#nav-links {
  display: flex;
  list-style: none;
}

#nav-links a {
  text-decoration: none;
  color: var(-white-color)。
}

.nav-links {
  margin: 0 15px;
  字體大小。1.08rem;
  position: relative;
  cursor: 指標。
  text-transform: 大寫。
}


/* 社交鏈接的樣式 */

#social-links {
  margin-right: 10px;
}

.social-links {
  filter: invert()。
  margin: 0 5px;
}

.social-links img {
  width: 25px;
  transition: all 300ms ease;
}

.social-links img:hover {
  transform: scale（1.5）。
}


/* Styling NavBar finished */; }

/* 默認內容的樣式設計 */
#content {
  position: relative;
  margin-top: 10px;
  height: 100vh;
}

#content:before {
  content: ""。
  width: 100%。
  height: 100%;
  position: absolute;
  background: url("./PGC_Stock/sldier-gg-gradient1.jpg")center center/cover
    不重復。
  z-index: -1;
}

#content {
  background-image: url(./PGC_Stock/slide-bg.png)。
  background-size: 900px;
  background-repeat: no-repeat;
  background-position: bottom right;
}

#content div {
  position: absolute;
  left: 5%;
  top: 20%;
  display: flex;
  flex-direction: column;
}

#content span h1 {
  text-transform: 大寫。
  font-size: 4rem;
  line-height: 1;
}

.para {
  margin-top: 5px;
  字體大小: 1.3rem;
}

.btn {
  margin-top: 5px;
  color: var(-blue-color);
  padding: 5px 5px;
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  background-color: var(-white-color);
  border: none;
  border-radius: 5px;
  字體大小: 1.5rem;
  width: 150px。
}

#footer {
  height: 60px;
  background-color: var(--red-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}

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

<head>/span>
  <meta charset="UTF-8">/span>
  < meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
  <title>Punjab Group Of Colleges | Hafizabad</title> 
  <link rel="styleheet" href=" 。 /css/style.css">。
</head> 

<body> 
  <header> 
    <nav id="navbar"> 
      <div id="logo"> 
        <img class="logo" src=" . /PGC_Stock/LOGO/logo.svg" alt="logo">。
      </div>/span>
      <ul id="nav-links"> 
        <a>/span>
          < li class="nav-links" onclick="about()" /span>> 關于</li> 
        </a>/span>
        <a>/span>
          <li class="nav-links"> 方案</li>>
        </a>/span>
        <a>/span>
          <li class="nav-links"> 校園生活</li> 
        </a>/span>
        <a>/span>
          <li class="nav-links"> Gallery</li>
        </a>/span>
        <a>/span>
          <li class=" nav-links"> 聯系我們</li> 
        </a>/span>
      </ul>/span>
      <div id="social-links"> 
        <a class="social-links" href="https://www.facebook. com/pgchfdofficial" target="_blank"/span>> <img src=" 。 /PGC_Stock/LOGO/facebook.png" alt="facebook"></a> 
        <a class="social-links"/span> href="https://www.instagram. com/pgchfd/" target="_blank"/span>> <img src=" 。 /PGC_Stock/LOGO/instagram.png" alt="instagram"></a> 
        < a class="social-links"  href="GATXUWWYDFHN4SK64F6H3X6UVUCRGMR6BXJ4JAPT2MMG5QI5VRQLQNE" target="_blank"/span>> <img src=" 。 /PGC_Stock/LOGO/youtube.png" alt="youtube"></a> 
      </div>/span>
    </nav> 
  </header>/span>
  <section id="content"> 
    <div>/span>
      <span> 
                <h1 id="1"/span>> A Legacy Of</h1>。
                <h1 id="2"/span>> 卓越</h1>。
            </span>/span>
      <span class="para"/span>> 一年級預科招生開放</span>。
      < button class="btn" id="apply">/span>立即申請! </butt>
    </div>/span>
  </section>/span>
  <footer id="footer"> 
    <p>Punjab Colleges Hafizabad</p>/span>
    <p class="copy">&copy； 2021 Punjab Colleges. All Rights Reserved.</p>
    <div id="social-links">/span>
      <a class="social-links" href="https://www.facebook. com/pgchfdofficial" target="_blank"/span>> <img src=" 。 /PGC_Stock/LOGO/facebook.png" alt="facebook"></a> 
      <a class="social-links"/span> href="https://www.instagram. com/pgchfd/" target="_blank"/span>> <img src=" 。 /PGC_Stock/LOGO/instagram.png" alt="instagram"></a> 
      < a class="social-links"  href="GATXUWWYDFHN4SK64F6H3X6UVUCRGMR6BXJ4JAPT2MMG5QI5VRQLQNE" target="_blank"/span>> <img src=" 。 /PGC_Stock/LOGO/youtube.png" alt="youtube"></a> 
    </div>/span>
  </footer> 
</body>/span>

</html>/span>

uj5u.com熱心網友回復：

如果你稍微修改一下about串列元素，添加一個名為about的新類，并洗掉行內的click處理程式，像這樣：

<ul id="nav-links"> 
    <li class="nav-links about">/span><。 a href='#'>關于< a></li>
    <li class="nav-links">/span>< a href='#'/span>>Programmes< /a>/span></li>
    <li class="nav-links">/span>< a href='#'/span>>Life At Campus< a></li>>
    <li class="nav-links">/span>< a href='#'>/span>Gallery< /a></li>
    <li class="nav-links">/span>< a href='#'>聯系我們< <a></li>
</ul>

注意，超鏈接/錨點在li元素中--它作為ul的直接子元素是無效的！

然后在body部分末尾的腳本中附加一個事件監聽器，就像這樣：

<script>。
    document.querySelector(' .about')。 addEventListener('click',function(>/span>) {
        let content=document.querySelector（'section#content'）。
        fetch( 'about.html' )
            .then( r=> r.text() )
            .then( html=>/span>{
                content.insertAdjacentHTML('beforebegin'/span>,html)
                content.parentNode.removeChild(content)
        })
    })
</script>

這將發送一個ajax請求，讀取about.html并將其作為一個字串回傳。然后這個HTML字串被插入到DOM的section id='content'之前，然后該部分被移除。

uj5u.com熱心網友回復：

到目前為止，我理解你希望 about.html 的內容出現在當前的 html 頁面上。如果我沒說錯的話，我建議你看看bootstrap V5，在那里你可以實作modals，在那里你可以放置任何html元素，它將根據動作彈出。 1：這個鏈接將帶你到介紹頁面，你會看到使用Bootstrap 5的前提條件介紹 - Bootstrap v5.1

2：這個鏈接將帶你到模態的完美解釋（它可能一開始看起來與主題無關，但請嘗試復制代碼并在你的本地主機或任何服務器上運行，并嘗試探索）。 Modal - Bootstrap v5.1 希望這對你至少有一定的幫助。如果沒有，也可以通過Bootstrap 5的不同優點進行探索（如果你還沒有探索過）。謝謝你

。

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

標籤：

上一篇：使用JNA獲得特定行程的dll的基本地址

下一篇：在={ARRAYFORMULA()}中填入幾列的空白單元。