无法访问除我的html主页之外的其他页面

Question

/* ************************** */
/* Header*/
/* ************************** */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  height: 12.8rem;
  padding: 0 4.8rem;
  position: relative;
}

.logo {
  height: 12.8rem;
}

/* ************************** */
/* Header*/
/* ************************** */

.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4.8rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #000;
  font-weight: 500;
  font-size: 1.8rem;
  transition: all 0.3s;
  cursor: pointer;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #333;
  cursor: pointer;
}

/* !!!! */
/* For Hamburger Menu*/
/* ********* */

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #333;
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/* STICKY NAVIGATION */
.sticky .header {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.97);
  z-index: 999;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

.sticky .section-hero {
  margin-top: 9.6rem;
}
/* ************************** */
/* Hero Section*/
/* ************************** */

.hero-section {
  position: relative;
  margin-bottom: 9.6rem;
  z-index: 0;
}

.hero-img {
  width: 100%;
}

.motto {
  position: absolute;
  top: 40%;
  right: 15%;
  transform: translate(0, -50%);
}

.sticky-note {
  background-color: #1809f2;
  width: 35rem;
  height: 35rem;
  text-align: left;
  padding: 2.4rem;
  margin-bottom: 1.6rem;
}

.motto-heading {
  font-size: 6.2rem;
  color: #fff;
}

.btn--center {
  position: absolute;
  right: 50%;
  transform: translate(50%, 0);
}

/* ************************** */
/* New Stock section*/
/* ************************** */

/* .sticky-flex {
  display: flex;
} */

.grid--2-cols-cus1 {
  grid-template-columns: 1fr 9fr;
}

.new-stock {
  padding: 1.6rem 0;
}

.new-sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #1809f2;
  width: 14.2rem;
  height: 14.2rem;
  padding: 0.8rem;
  text-align: right;
}

.sticky-heading {
  color: #fff;
  font-size: 1.6rem;
}

.product img {
  width: 100%;
}

.product {
  position: relative;
  border: 1.5px solid #000;
}

.product::after {
  content: "New";
  position: absolute;
  top: 0;
  right: 0;

  font-size: 1.4rem;
  background-color: #1809f2;
  color: #fff;
  padding: 1.2rem 0.8rem;
}

.product-description {
  padding: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

.product-description p:nth-child(3) {
  margin-bottom: 0.8rem;
}

.btn--right {
  justify-self: end;
  grid-column: -2 / -1;
}

/* ************************** */
/* Playlist section*/
/* ************************** */

.grid--2-cols-cus2 {
  grid-template-columns: 70fr 30fr;
  column-gap: 6.4rem;
}

.section-playlist {
  padding: 4.8rem;
  background-color: #1809f2;
  margin-bottom: 9.6rem;
}

.playlist-img {
  width: 100%;
}

.playlist-list {
  text-align: center;
}

.playlist-description {
  color: #fff;
  font-size: 1.6rem;
}

.playlist-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.playlist-heading {
  color: #fff;
  font-size: 5.2rem;
}

.note {
  position: absolute;
  right: 45px;
}

/* ************************** */
/* Staff pick section*/
/* ************************** */

.product-staff img {
  width: 100%;
}

.product-staff,
.product {
  position: relative;
  border: 1.5px solid #000;
  transition: all 0.3s;
}

.product-staff:hover,
.product:hover,
.product-staff:active,
.product:active {
  transform: scale(1.1);
  cursor: pointer;
}

/* ************************** */
/* Footer*/
/* ************************** */

.footer {
  padding: 4.8rem 0;
  margin-top: 9.6rem;
  background-color: #c2c2c2;
  position: relative;
}

.grid--footer {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}

.footer-logo {
  position: absolute;
  top: 0;
  left: 20px;
  height: 9.6rem;
}

.social-icon {
  height: 1.6rem;
  width: 1.6rem;
  position: absolute;
  right: 10px;
}

.copyright {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 1.4rem;
  line-height: 1.6;
}

.footer-heading {
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 3.2rem;
}

.margin-right {
  margin-left: -25px;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.2rem;
  color: #000;
  transition: all 0.3s;
  position: relative;
}

.footer-link:hover,
.footer-link:active {
  color: #333;
}

console.log("Hello world!");

const myName = "Jordan Septian";
const h1 = document.querySelector(".heading-primary");
console.log(myName);
console.log(h1);

///////////////////////////////////////////////////////////
// Make mobile navigation work

const btnNavEl = document.querySelector(".btn-mobile-nav");
const headerEl = document.querySelector(".header");

btnNavEl.addEventListener("click", function () {
  headerEl.classList.toggle("nav-open");
});

///////////////////////////////////////////////////////////
// Set current year
const yearEl = document.querySelector(".year");
const currentYear = new Date().getFullYear();
yearEl.textContent = currentYear;

///////////////////////////////////////////////////////////
// Smooth scrolling animation

const allLinks = document.querySelectorAll("a:link");

allLinks.forEach(function (link) {
  link.addEventListener("click", function (e) {
    e.preventDefault();
    const href = link.getAttribute("href");

    // Scroll back to top
    if (href === "#")
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });

    // Scroll to other links
    if (href !== "#" && href.startsWith("#")) {
      const sectionEl = document.querySelector(href);
      sectionEl.scrollIntoView({ behavior: "smooth" });
    }

    // Close mobile navigation
    if (link.classList.contains("main-nav-link"))
      headerEl.classList.toggle("nav-open");
  });
});

///////////////////////////////////////////////////////////
// STICKY NAVIGATION

const sectionHeroEl = document.querySelector(".section-hero");

const obs = new IntersectionObserver(
  function (entries) {
    const ent = entries[0];
    console.log(ent);

    if (ent.isIntersecting === false) {
      document.body.classList.add("sticky");
    }

    if (ent.isIntersecting) {
      document.body.classList.remove("sticky");
    }
  },
  {
    // In the viewport
    root: null,
    threshold: 0,
    rootMargin: "-80px",
  }
);
obs.observe(sectionHeroEl);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta
      name="description"
      content="Groovy is a store where you can spoil your record collecting hobby. Here you can find whatever record you are looking for"
    />

    <link rel="icon" href="img/favicon copy.png" />
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
    <link rel="manifest" href="manifest.webmanifest" />
    <link href="style.css" rel="stylesheet" type="text/css" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/general.css" />
    <link rel="stylesheet" href="css/queries.css" />
    <link rel="stylesheet" href="about.html" />
    <link rel="stylesheet" href="stocks.html" />

    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Russo+One&family=Source+Code+Pro&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <script
      defer
      src="https://unpkg.com/[email protected]/dist/smoothscroll.min.js"
    ></script>
    <script defer src="js/script.js"></script>

    <title>Groovy Records</title>
  </head>
  <body>
    <header class="header sticky">
      <a href="index.html">
        <img src="img/footer/logo.png" alt="Groovy logo" class="logo" />
      </a>

      <nav class="main-nav">
        <ul class="main-nav-list">
          <li>
            <a href="about.html" class="main-nav-link">About</a>
          </li>
          <li><a href="stocks.html" class="main-nav-link">Stocks</a></li>
          <li><a href="#" class="main-nav-link">Stores</a></li>
        </ul>
      </nav>

      <button class="btn-mobile-nav">
        <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
        <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
      </button>
    </header>

    <main>
      <section class="hero-section">
        <img
          src="img/Web_Home EmptyBG.webp"
          alt="background image"
          class="hero-img"
        />
        <div class="motto">
          <div class="sticky-note">
            <span class="motto-heading">Spinning</span>
            <span class="motto-heading">Memories</span>
            <span class="motto-heading">Since &#9834;</span>
            <span class="motto-heading">&horbar;&horbar;&horbar; 2010 </span>
          </div>
          <a href="#" class="hero-btn btn btn--center">Our Story</a>
        </div>
      </section>

      <section class="new-stock">
        <div class="record container grid grid--2-cols-cus1 margin-bottom-md">
          <div class="new-sticky">
            <h1 class="heading-secondary sticky-heading">New In Stock</h1>
          </div>

          <div class="grid grid--4-cols">
            <div class="product">
              <img
                src="img/New In Stocks/LoyleCarner-NotWavingButDrowning-3000x3000.jpg"
                alt="loyle-carner"
              />
              <div class="product-description">
                <p>Not Waving, But Drowning</p>
                <p>Loyle Carner</p>
                <p>2019</p>
                <p>Hip Hop music</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/Frank-Ocean-Blond.jpg"
                alt="Frank ocean"
              />
              <div class="product-description">
                <p>Blonde</p>
                <p>Frank Ocean</p>
                <p>2016</p>
                <p>R&B/Soul</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/Arlo-Parks.jpg.png"
                alt="Arlo-Parks"
              />
              <div class="product-description">
                <p>Collapsed in Sunbeams</p>
                <p>Arlo Parks</p>
                <p>2021</p>
                <p>R&B/Soul, Alternative/Indie</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/kings.jpeg"
                alt="kings-of-convenience"
              />
              <div class="product-description">
                <p>Declaration of Dependence</p>
                <p>Kings of Convenience</p>
                <p>2009</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img src="img/New In Stocks/billie.jpeg" alt="billie-holiday" />
              <div class="product-description">
                <p>Strange Fruit</p>
                <p>Billie Holiday</p>
                <p>1972</p>
                <p>Jazz</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img src="img/New In Stocks/fkj.jpeg" alt="Fkj" />
              <div class="product-description">
                <p>French Kiwi Juice</p>
                <p>FKJ</p>
                <p>2017</p>
                <p>Funk/Soul</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/tyler.jpeg"
                alt=" Tyler, The creator"
              />
              <div class="product-description">
                <p>Call Me If You Get Lost</p>
                <p>Tyler, The Creator</p>
                <p>2021</p>
                <p>Hip Hop/ Rap</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/francoise.jpg"
                alt="Francoise hardy"
              />
              <div class="product-description">
                <p>Tous les garçons et filles</p>
                <p>Françoise Hardy</p>
                <p>1962</p>
                <p>Soul</p>
                <p>$50.00</p>
              </div>
            </div>
          </div>
          <a href="#" class="btn btn--right">All Stocks</a>
        </div>
      </section>

      <section class="section-playlist">
        <div class="playlist container grid grid--2-cols-cus2">
          <div class="grid grid--3-cols">
            <div class="playlist-list">
              <img
                src="img/playlist/Playlist_Krulism.png"
                alt="Playlist_Krulism"
                class="playlist-img"
              />
              <p class="playlist-description">
                A playlist intended for lifetime dedicated music enthusiast
              </p>
            </div>
            <div class="playlist-list">
              <img
                src="img/playlist/Playlist_Trip The Light.png"
                alt="Playlist_Trip"
                class="playlist-img"
              />
              <p class="playlist-description">
                A playlist intended for lifetime dedicated music enthusiast
              </p>
            </div>
            <div class="playlist-list">
              <img
                src="img/playlist/Playlist_Jazz.png"
                alt="Playlist_Jazz"
                class="playlist-img"
              />
              <p class="playlist-description">
                A playlist intended for lifetime dedicated music enthusiast
              </p>
            </div>
          </div>

          <div class="playlist-container">
            <span class="playlist-heading"
              >Curated Playlists to Jam Into
              <span class="note">&#9834;&#9834;</span>
            </span>
          </div>
        </div>
      </section>

      <section class="staff-pick">
        <div class="record container grid grid--2-cols-cus1 margin-bottom-md">
          <div class="new-sticky">
            <h1 class="heading-secondary sticky-heading">Staff's Picks</h1>
          </div>

          <div class="grid grid--4-cols">
            <div class="product-staff">
              <img src="img/staff's pick/chet.jpg" alt="Chet Baker" />
              <div class="product-description">
                <p>Chet Baker Sings</p>
                <p>Chet Baker</p>
                <p>1954</p>
                <p>Jazz</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/macmiller.jpg" alt="Mac Miller" />
              <div class="product-description">
                <p>Circles</p>
                <p>Mac Miller</p>
                <p>2020</p>
                <p>Hip Hop, Punk, Emo Rap</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/mazzy.jpg" alt="Mazzy Star" />
              <div class="product-description">
                <p>So Tonight That I Might See</p>
                <p>Mazzy Star</p>
                <p>1993</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/sade.jpg" alt="Sade adu" />
              <div class="product-description">
                <p>The Best of Sade</p>
                <p>Sade</p>
                <p>1994</p>
                <p>Jazz, Soul, R&B</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img
                src="img/staff's pick/beach house.jpg.png"
                alt="Beach House"
              />
              <div class="product-description">
                <p>Depression Cherry</p>
                <p>Beach House</p>
                <p>2015</p>
                <p>Dream Pop, Indie Rock</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/archy.jpg" alt="Archy Marshall" />
              <div class="product-description">
                <p>A New Place 2 Drown</p>
                <p>King Krule</p>
                <p>2015</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/kingkrule.jpg.png" alt=" King Krule" />
              <div class="product-description">
                <p>6 Feet Beneath The Moon</p>
                <p>King Krule</p>
                <p>2013</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img
                src="img/staff's pick/the-ooz.jpg.png"
                alt="King Krule - The Ooz"
              />
              <div class="product-description">
                <p>The Ooz</p>
                <p>King Krule</p>
                <p>2017</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="logo-col">
        <a href="#" class="container-rel">
          <img
            src="img/footer/logo.png"
            alt="Groovy logo"
            class="footer-logo"
          />
        </a>
      </div>
      <div class="container grid grid--footer margin-bottom-md">
        <nav class="nav-col">
          <p class="footer-heading">Quick Links</p>
          <ul class="footer-nav">
            <li><a href="#" class="footer-link">Home</a></li>
            <li><a href="about.html" class="footer-link">About</a></li>
            <li><a href="#" class="footer-link">Stocks</a></li>
            <li><a href="#" class="footer-link">Stores</a></li>
            <li><a href="#" class="footer-link">Wishlist</a></li>
          </ul>
        </nav>

        <nav class="nav-col">
          <p class="footer-heading margin-right">Contact</p>
          <ul class="footer-nav">
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="logo-whatsapp" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">&#40;&#43;65&#41;22457889</a>
            </li>
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="logo-instagram" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">groovy.records</a>
            </li>
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="logo-facebook" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">groovy_records</a>
            </li>
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="mail-outline" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">[email protected]</a>
            </li>
          </ul>
        </nav>
      </div>
      <p class="copyright">
        &copy; <span class="year">2023</span> Groovy Records. All rights
        reserved.
      </p>
    </footer>
    <script
      type="module"
      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>

我的 html 似乎不允许我打开另一个页面。我把其他页面的链接放在我的 html 代码的头部。截至目前我有 3 个 html 文件：index.html、about.html、stocks.html。当我在我的index.html页面上时，我尝试通过单击导航上的按钮来打开我的关于页面，但我只是停留在我的index.html页面上，并且不允许我移动到另一个页面。 下面是我的代码

我已经通过检查头部和所有其他页面的链接来检查所有可能的错误，但我仍然停留在index.html页面上。我确信我没有错过代码中的任何内容，但我仍然无法访问另一个页面（about.html 和stocks.html）。我的目标只是能够加载另一个页面。

Answer 1

当您将

e.preventDefault();

添加到

link.addEventListener

下的代码中时，您禁用了点击，请尝试删除它，您将能够导航