文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用JavaScript在div标记中加载HTML

问如何使用JavaScript在div标记中加载HTML
EN

Stack Overflow用户

提问于 2021-09-18 08:19:26

回答 2查看 1.1K关注 0票数 0

我只是在练习做一个大学网站。正文中有3个标记，一个是<header>，第二个是div，第三个是footer。我在另一个about.html中有一些没有<body>和<head>标记的HTML。在我的style.css文件中，我为about.html设置了样式。我只想要一件事，每当我点击它时，用<div id="content"></div>替换about.html中的代码。使用JavaScript？

注意:代码段中提供的CSS没有响应。我决定做这一步，而不是提前作出反应。

下面是我想用给定的代码片段替换的代码。

<section id="home">
    <div class="main">
        <h1 class="slide">The Biggest</h1>
        <h1 class="slide">Educational</h1>
        <h1 class="slide">Network</h1>
        <h1 class="slide">Punjab Group</h1>
        <h1 class="slide">Of Colleges</h1>
        <h1 class="slide">Hafizabad</h1>
    </div>
    <div class="swipe">
        <img src="./PGC_Stock/chevron-down.svg" alt="swipe">
    </div>
</section>
<section id="team">
    <div class="card-container">
        <div class="cards" id="card-1">
            <img src="./PGC_Stock/ADMIN/khizar_abbas_sqr.jpg" alt="khizar_abbas">
            <div>
                <h1 class="name">Khizar Abbas</h1>
                <p class="status">IT Manager At PGC-Hafizabad</p>
            </div>
        </div>
        <div class="cards" id="card-2">
            <img src="./PGC_Stock/ADMIN/hafiz_fahad_sqr.jpg" alt="hafiz_fahad">
            <div>
                <h1 class="name">Hafiz Fahad</h1>
                <p class="status">Principal At PGC-Hafizabad</p>
            </div>
        </div>
        <div class="cards" id="card-3">
            <img src="./PGC_Stock/ADMIN/salman_butt.jpg" alt="salman_butt">
            <div>
                <h1 class="name">Salman Butt</h1>
                <p class="status">Vice Principal At PGC-Hafizabad</p>
            </div>
        </div>
        <div class="cards" id="card-5">
            <img src="./PGC_Stock/ADMIN/mian_afzal-scaled_sqr.jpg" alt="mian-afzal">
            <div>
                <h1 class="name">Sohail Afzal</h1>
                <p class="status">Executive Director PGC</p>
            </div>
        </div>
        <div class="cards" id="card-4">
            <img src="./PGC_Stock/ADMIN/mianamer_sqr.jpg" alt="mian-amer">
            <div>
                <h1 class="name">Mian Amer Mahmood</h1>
                <p class="status">Chairman PGC</p>
            </div>
        </div>
    </div>
</section>

:root {
  --blue-color: #2c2b6f;
  --red-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%;
}


/* Styling Logo */

.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;
  font-size: 1.08rem;
  position: relative;
  cursor: pointer;
  text-transform: uppercase;
}


/* Styling Social Links */

#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 */

/* Styling Default Content */
#content {
  position: relative;
  margin-top: 10px;
  height: 100vh;
}

#content::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../PGC_Stock/sldier-bg-gradient1.jpg") center center/cover
    no-repeat;
  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: uppercase;
  font-size: 4rem;
  line-height: 1;
}

.para {
  margin-top: 5px;
  font-size: 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;
  font-size: 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>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Punjab Group Of Colleges | Hafizabad</title>
  <link rel="stylesheet" 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>
      <ul id="nav-links">
        <a>
          <li class="nav-links" onclick="about()">About</li>
        </a>
        <a>
          <li class="nav-links">Programmes</li>
        </a>
        <a>
          <li class="nav-links">Life At Campus</li>
        </a>
        <a>
          <li class="nav-links">Gallery</li>
        </a>
        <a>
          <li class="nav-links">Contact Us</li>
        </a>
      </ul>
      <div id="social-links">
        <a class="social-links" href="https://www.facebook.com/pgchfdofficial" target="_blank"><img src="./PGC_Stock/LOGO/facebook.png" alt="facebook"></a>
        <a class="social-links" href="https://www.instagram.com/pgchfd/" target="_blank"><img src="./PGC_Stock/LOGO/instagram.png" alt="instagram"></a>
        <a class="social-links" href="GATXUWWYDFFHN4SK64F6H3X6UVUCRGMR6BXJ4JAPT2MMG5QI5VRQLQNE" target="_blank"><img src="./PGC_Stock/LOGO/youtube.png" alt="youtube"></a>
      </div>
    </nav>
  </header>
  <section id="content">
    <div>
      <span>
                <h1 id="1">A Legacy Of</h1>
                <h1 id="2">Excellence</h1>
            </span>
      <span class="para">Pre 1st Year Admissions Open</span>
      <button class="btn" id="apply">Apply Now!</button>
    </div>
  </section>
  <footer id="footer">
    <p>Punjab Colleges Hafizabad</p>
    <p class="copy">&copy; 2021 Punjab Colleges. All Rights Reserved.</p>
    <div id="social-links">
      <a class="social-links" href="https://www.facebook.com/pgchfdofficial" target="_blank"><img src="./PGC_Stock/LOGO/facebook.png" alt="facebook"></a>
      <a class="social-links" href="https://www.instagram.com/pgchfd/" target="_blank"><img src="./PGC_Stock/LOGO/instagram.png" alt="instagram"></a>
      <a class="social-links" href="GATXUWWYDFFHN4SK64F6H3X6UVUCRGMR6BXJ4JAPT2MMG5QI5VRQLQNE" target="_blank"><img src="./PGC_Stock/LOGO/youtube.png" alt="youtube"></a>
    </div>
  </footer>
</body>

</html>

css

dom

javascript

html

回答 2

Stack Overflow用户

发布于 2021-09-18 08:44:18

如果稍微修改about list元素以添加一个名为about的新类，并删除内联click处理程序，如下所示：

<ul id="nav-links">
    <li class="nav-links about"><a href='#'>About</a></li>
    <li class="nav-links"><a href='#'>Programmes</a></li>
    <li class="nav-links"><a href='#'>Life At Campus</a></li>
    <li class="nav-links"><a href='#'>Gallery</a></li>
    <li class="nav-links"><a href='#'>Contact Us</a></li>
</ul>

注意，超链接/锚位于li元素中-它作为ul的直接子元素是无效的！

然后在body部分末尾的脚本中附加一个事件侦听器，如下所示：

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

这将发送一个ajax请求，该请求读取about.html并将其作为字符串返回。然后将这个HTML字符串插入到section id='content'之前的DOM中，然后删除该部分。

票数 3

Stack Overflow用户

发布于 2021-09-18 09:05:41

到目前为止，我知道您希望about.html的内容出现在当前的html页面上。如果我没有错，那么我建议您查看引导V5，在那里您可以实现modals，在那里您可以放置任何html元素，它将根据操作弹出。1:此链接将带您进入导言页，在该页面中，您将看到使用Bootstrap 5 导言·Bootstrap v5.1的先决条件。

2:这个链接将带您到modals解释得很完美(它可能最初看上去与主题无关，但尝试复制代码并在您的本地主机或任何服务器上运行并尝试探索) 模态·Bootstrap v5.1希望至少在一定程度上对您有所帮助。如果没有，也做探索通过不同的利益引导5(如果你还没有探索)。谢谢

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69232884

复制

相似问题

问如何使用JavaScript在div标记中加载HTML
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript在div标记中加载HTMLEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript在div标记中加载HTML
EN