代码之家  ›  专栏  ›  技术社区  ›  Jordan Fritztiono

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

hyperlink html
  •  -2
  • Jordan Fritztiono  · 技术社区  · 1 年前

    我的html似乎不允许我打开另一个页面。我把其他页面的链接放在我的html代码的头上。到目前为止,我有3个html文件:index.html,about.html,stocks.html。当我在index.html页面上时,我试图通过点击导航上的按钮打开我的about页面,但我只是停留在我的index.html页面,它不允许我移到另一个页面。 贝娄是我的密码

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

    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);
    /* ************************** */


/* 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;
}
    <!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>
    1 回复  |  直到 1 年前
        1
  •  1
  •   Oyinlade Demola    1 年前

    添加时禁用了单击 e.preventDefault(); 给你代码下 link.addEventListener 试着删除它,你就可以导航了

    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    10 月前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    10 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    11 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    11 月前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    11 月前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    11 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    11 月前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    11 月前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    11 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    11 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号