导航栏中的单个导航链接未打开

编程问答 2022-05-22

问题描述

我刚开始使用 Visual Studio Code 开发一个商业网站。我已经完成了大部分主页，但由于某种原因，导航栏中的“帐户”选项卡没有打开。当我点击它时它甚至没有注册，我已经创建了一个 Account.html 页面，它链接到主页 html 但它只是没有打开。所有其他导航链接都可以正常工作，就像我的产品链接和购物车链接一样。我还应该提到，当我从我所在的任何其他页面单击它时，帐户链接会打开并将我重定向到它。例如，当我在“产品”页面上单击导航栏中的“帐户”链接时，它会立即打开。

有什么帮助吗？提前致谢

这是主页代码（Index_HtmlPage.html）：

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

<head>
<Meta charset="UTF-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- Favicon -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
<!-- Box icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/Boxicons@latest/css/Boxicons.min.css" />

<!-- Custom StyleSheet -->
<link rel="stylesheet" href="StyleSheet.css" />
<title>Atomic Bouncy Website</title>
</head>

<body>
<!-- Header -->
<header id="home" class="header">
    <!-- Navigation -->
    <nav class="nav">
        <div class="navigation container">
            <div class="logo">
                <h1>Atomic Bouncy</h1>
            </div>

            <div class="menu">
                <div class="top-nav">
                    <div class="logo">
                        <h1>Atomic Bouncy</h1>
                    </div>
                    <div class="close">
                        <i class="bx bx-x"></i>
                    </div>
                </div>

                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="Index_HtmlPage.html" class="nav-link scroll-link">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="Product_HtmlPage.html" class="nav-link">Products</a>
                    </li>
                    <li class="nav-item">
                        <a href="#about" class="nav-link scroll-link">About</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact" class="nav-link scroll-link">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a href="Account_HtmlPage.html" class="nav-link scroll-link">Account</a>
                    </li>
                    <li class="nav-item">
                        <a href="Cart_HtmlPage.html" class="nav-link icon"><i class="bx bx-shopping-bag"></i></a>
                    </li>
                </ul>
            </div>

            <a href="Cart_HtmlPage.html" class="cart-icon">
                <i class="bx bx-shopping-bag"></i>
            </a>

            <div class="hamburger">
                <i class="bx bx-menu"></i>
            </div>
        </div>
    </nav>

    <!-- Hero -->
    <img src="images/Heroimage.png" alt="" class="hero-img" />

    <div class="hero-content">
        <h2><span class="discount">30% </span>disCOUNT</h2>
        <h1>
            <span>Birthday Vibes</span>
            <span>mode on</span>
        </h1>
        <a class="btn" href="#">Book Now</a>
    </div>
</header>

<!-- Main -->
<main>
    <section class="advert section">
        <div class="advert-center container">
            <div class="advert-Box">
                <div class="dotted">
                    <div class="content">
                        <h2>
                            Girls <br />
                            Clothing
                        </h2>
                        <h4>Worlds Best Brands</h4>
                    </div>
                </div>
                <img src="images/advert1.png" alt="">
            </div>

            <div class="advert-Box">
                <div class="dotted">
                    <div class="content">
                        <h2>
                            Summer <br />
                            Clothing
                        </h2>
                        <h4>Worlds Best Brands</h4>
                    </div>
                </div>
                <img src="images/advert2.png" alt="">
            </div>

            <div class="advert-Box">
                <div class="dotted">
                    <div class="content">
                        <h2>
                            Boys <br />
                            Clothing
                        </h2>
                        <h4>Worlds Best Brands</h4>
                    </div>
                </div>
                <img src="images/advert3.png" alt="">
            </div>
        </div>
    </section>

    <!-- Featured -->
    <section class="section featured">
        <div class="title">
            <h1>Featured Products</h1>
        </div>

        <div class="product-center container">
            <div class="product">
                <div class="product-header">
                    <img src="JC Images/JC Item 1.jpg" alt="">
                    <ul class="icons">
                        <span><i class="bx bx-heart"></i></span>
                        <span><i class="bx bx-shopping-bag"></i></span>
                        <span><i class="bx bx-search"></i></span>
                    </ul>
                </div>
                <div class="product-footer">
                    <a href="#">
                        <h3>disco Party Castle</h3>
                    </a>
                    <div class="rating">
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bx-star"></i>
                    </div>
                    <h4 class="price">R500</h4>
                </div>
            </div>
            <div class="product">
                <div class="product-header">
                    <img src="JC Images/JC Item 2.jpg" alt="">
                    <ul class="icons">
                        <span><i class="bx bx-heart"></i></span>
                        <span><i class="bx bx-shopping-bag"></i></span>
                        <span><i class="bx bx-search"></i></span>
                    </ul>
                </div>
                <div class="product-footer">
                    <a href="#"><h3>Princess Party 'N Slide</h3></a>
                    <div class="rating">
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bx-star"></i>
                    </div>
                    <h4 class="price">R900</h4>
                </div>
            </div>
            <div class="product">
                <div class="product-header">
                    <img src="JC Images/JC Item 3.jpg" alt="">
                    <ul class="icons">
                        <span><i class="bx bx-heart"></i></span>
                        <span><i class="bx bx-shopping-bag"></i></span>
                        <span><i class="bx bx-search"></i></span>
                    </ul>
                </div>
                <div class="product-footer">
                    <a href="#"><h3>Jungle Party Castle</h3></a>
                    <div class="rating">
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bx-star"></i>
                    </div>
                    <h4 class="price">R600</h4>
                </div>
            </div>
            <div class="product">
                <div class="product-header">
                    <img src="JC Images/JC Item 4.jpg" alt="">

                    <ul class="icons">
                        <span><i class="bx bx-heart"></i></span>
                        <span><i class="bx bx-shopping-bag"></i></span>
                        <span><i class="bx bx-search"></i></span>
                    </ul>
                </div>
                <div class="product-footer">
                    <a href="#"><h3>Football Shootout Castle</h3></a>
                    <div class="rating">
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bxs-star"></i>
                        <i class="bx bx-star"></i>
                    </div>
                    <h4 class="price">R450</h4>
                </div>
            </div>
        </div>
    </section>        
</main> 
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<!-- Custom Script -->
<script src="Index_JavaScript.js"></script>
</body>

</html>

我已经留下了大部分不必要的 CSS，这里只是标题和导航的 CSS。 这是主样式表 (StyleSheet.css)：

:root {
  --white: #fff;
  --black: #222;
  --pink: #f60091;
  --grey: #444;
  --grey2: #959595;
  --grey-alt: #d1e2e9;
  --yellow: #ffd800;
  --green: #59b210;
}

*,*::before,*::after {
  margin: 0;
  padding: 0;
  Box-sizing: inherit;
}

html {
  scroll-behavior: smooth;
  Box-sizing: border-Box;
  font-size: 62.5%;
}

body {
  font-family: "Poppins",sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  background-color: #fff;
  color: #243a6f;
  position: relative;
  z-index: 1;
}

h1,h2,h3,h4 {
  font-weight: 500;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

li {
  list-style: none;
}

.container {
  max-width: 120rem;
  margin: 0 auto;
}

.container-md {
  max-width: 100rem;
  margin: 0 auto;
}

@media only screen and (max-width: 1200px) {
  .container {
    padding: 0 3rem;
  }

  .container-md {
    padding: 0 3rem;
  }
}

/* Header */
.header {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: var(--grey-alt);
  overflow: hidden;
}

.nav {
  padding: 1.6rem 0;
}

.nav.fix-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #243a6f;
  Box-shadow: 0 5px 15px rgba(0,0.3);
  z-index: 999;
}

.nav.fix-nav .nav-link,.nav.fix-nav .logo,.nav.fix-nav .cart-icon,.nav.fix-nav .hamburger {
  color: #fff;
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo h1 {
  font-size: 2.5rem;
}

.nav-list {
  display: flex;
  align-items: center;
}

.nav-item:not(:last-child) {
  margin-right: 0.5rem;
}

.nav-link:link,.nav-link:visited {
  padding: 0.8rem 1rem;
  transition: all 300ms ease-in-out;
}

.nav-link.icon {
  font-size: 3rem;
}

.top-nav {
  display: none;
}

.hamburger {
  display: none;
}

.cart-icon {
  display: none;
}

@media only screen and (max-width: 768px) {
  .menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 40rem;
    height: 100%;
    background-color: #fff;
    transition: all 500ms ease-in-out;
    z-index: 100;
  }

  .menu.show {
    left: 0;
  }

  .top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #243a6f;
    padding: 1rem 1.6rem;
  }

  .top-nav .logo {
    color: #fff;
  }

  .top-nav .close {
    color: #fff;
    font-size: 3rem;
    padding: 1rem;
    cursor: pointer;
  }

  .cart-icon {
    display: block;
    font-size: 3rem;
  }

  .hamburger {
    display: block;
    font-size: 3rem;
    padding: 0.5rem;
    cursor: pointer;
  }

  .nav-link:link,.nav-link:visited {
    display: block;
    font-size: 1.7rem;
    padding: 1rem 0;
  }

  .nav.fix-nav .nav-link {
    color: #243a6f;
  }

  .nav-list {
    flex-direction: column;
    align-items: start;
    padding: 1rem 1.6rem;
  }

  body.show::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0.8);
    z-index: 4;
  }

  .nav.show {
    background-color: rgba(0,0.8);
  }

  .nav-link.icon {
    display: none;
  }
}

/* Hero */
.header .hero-img {
  position: absolute;
  bottom: -10%;
  right: -5%;
  height: 60rem;
  object-fit: contain;
}

.hero-content {
  position: absolute;
  top: 50%;
  transform: translate(25%,-50%);
}

.hero-content h2 {
  color: #b888ff;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-content .discount {
  color: #fbb419;
}

.hero-content h1 span {
  color: #253b70;
  font-size: 6rem;
  font-weight: 700;
  display: block;
  line-height: 1;
  text-shadow: 3px 3px 0 #f1f1f1,4px 4px 0 #f1f1f1;
}

.btn {
  display: inline-block;
  background-color: #fc7c7c;
  padding: 1.2rem 4rem;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 3rem;
}

@media only screen and (max-width: 1200px) {
  .header .hero-img {
    right: -20%;
  }

  .hero-content {
    transform: translate(20%,-50%);
  }

  .hero-content h2 {
    font-size: 2rem;
  }

  .hero-content h1 span {
    font-size: 5rem;
  }
}

@media only screen and (max-width: 996px) {
  .header {
    min-height: 70vh;
  }

  .header .hero-img {
    height: 40rem;
    right: -10%;
  }
}

@media only screen and (max-width: 567px) {
  .header {
    min-height: 100vh;
  }

  .header .hero-img {
    height: 40rem;
    bottom: -15%;
  }

  .hero-content {
    top: 40%;
    transform: translate(15%,-50%);
  }

  .header .hero-img {
    right: 0%;
  }

  .hero-content h2 {
    font-size: 1.8rem;
  }

  .hero-content h1 span {
    font-size: 4rem;
  }

  .hero-content a {
    padding: 1rem 3rem;
  }
}

感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptnavnavvisual-studio-code