Javascript 响应式导航栏仅在我的主页上起作用
我正在尝试建立我的第一个完全响应的网站,除了这个导航栏,一切都正常工作。导航栏应该有一个“汉堡”按钮,你按下按钮,然后链接弹出。问题是这些链接只会出现在我的主页上,而不会出现在我的任何其他页面上 我尝试将导航栏的HTML代码从主页复制到其他页面,所有页面都使用相同的CSS代码。我认为问题一定出在Javascript中,但我没有足够的Java经验,无法独自解决问题 我还没有发现任何人有类似的问题,所以我自己也在问这个问题 以下是导航栏的代码: HTMLJavascript 响应式导航栏仅在我的主页上起作用,javascript,html,css,navigationbar,Javascript,Html,Css,Navigationbar,我正在尝试建立我的第一个完全响应的网站,除了这个导航栏,一切都正常工作。导航栏应该有一个“汉堡”按钮,你按下按钮,然后链接弹出。问题是这些链接只会出现在我的主页上,而不会出现在我的任何其他页面上 我尝试将导航栏的HTML代码从主页复制到其他页面,所有页面都使用相同的CSS代码。我认为问题一定出在Javascript中,但我没有足够的Java经验,无法独自解决问题 我还没有发现任何人有类似的问题,所以我自己也在问这个问题 以下是导航栏的代码: HTML <nav> <div c
<nav>
<div class="logo">
<a href="https://www.pwrgear.net"><img src="assets/images/pg-logo-white-250p.png" alt="White PWRGear Logo" title="Home"</a>
</div>
<ul class="nav-links">
<li><a href="assets/html/order.html">Order</a></li>
<li><a href="assets/html/reviews.html">Reviews</a></li>
<li><a href="assets/html/community.html">Community</a></li>
<li><a href="assets/html/contact.html">Contact</a></li>
<li><a href="assets/html/about.html">About</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="assets/js/script.js"></script>
JS
/* Navigation Bar Start */
nav
{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #1f1f1f;
}
.nav-links
{
display: flex;
justify-content: space-around;
width: 60%;
margin-right: 15%;
}
.nav-links a
{
text-decoration: none;
color: white;
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 17px;
font-weight: 300;
font-style: normal;
}
.nav-links a:hover
{
color: red;
}
.nav-links li
{
list-style: none;
}
.burger
{
display: none;
cursor: pointer;
}
.burger div
{
width: 28px;
height: 2px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1024px)
{
.nav-links
{
margin-right: 9%;
}
.imageheader
{
margin-top: 10%;
}
.imagetext
{
margin-top: 3%;
}
.header2
{
margin-top: 1%;
}
.subheader
{
margin-top: 2%;
margin-bottom: 1%;
font-size: 28px;
}
.subcontent
{
width: 70%;
margin-left: 15%;
font-size: 24px;
margin-top: 1%;
}
}
@media screen and (max-width:768px)
{
body
{
overflow-x: hidden;
}
.nav-links
{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #1f1f1f;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 0;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.logo
{
margin-left: 25%;
}
.nav-links li
{
opacity: 0;
}
.burger
{
display: block;
}
.imagetext
{
margin-top: -6%;
display: none;
}
.subheader
{
font-size: 24px;
margin-top: 7%;
margin-bottom: 2%;
}
.subcontent
{
font-size: 18px;
margin-left: 15%;
margin-right: 15%;
font-weight: lighter;
margin-top: 2%;
}
.imageheader
{
margin-top: 0%;
display: none;
}
}
@media screen and (max-width:375px)
{
.imagetext
{
display: none;
}
.imageheader
{
}
}
@media screen and (max-width:812px)
{
.imagetext
{
width: 90%;
margin-left: 10%;
margin-top: 20%;
}
.imageheader
{
width: 90%;
margin-top: 20%;
}
}
@media screen and (max-width:736px)
{
.imagetext
{
/* display: none; */
margin-top: 15%;
width: 90%;
margin-left: 10%;
}
.imageheader
{
/* display: none; */
margin-top: 17%;
width: 90%;
}
}
@media screen and (max-width:667px)
{
.imagetext
{
height: 0%;
width: 90%;
margin-left: 10%;
}
.imageheader
{
height: 5%;
width: 90%;
}
}
@media screen and (max-width:414px)
{
.imagetext
{
margin-top: -51%;
width: 90%;
margin-left: 10%;
font-size: 14px;
}
.imageheader
{
margin-top: -25%;
width: 90%;
font-size: 24px;
}
}
@media screen and (min-width:1366px)
{
.imagetext
{
margin-top: 0%;
width: 50%;
margin-left: 2%;
}
.subheader
{
margin-top: 2%;
margin-bottom: 2%;
}
.content1
{
width: 33.33%;
float: left;
}
.content2
{
width: 33.33%;
float: left;
}
.content3
{
width: 33.33%;
float: left;
}
}
@media screen and (max-width:1366px)
{
.contactimage
{
opacity: 0%;
}
}
@media screen and (min-width:1920px)
{
.subcontent
{
width: 80%;
margin-left: 10%;
margin-top: 1%;
margin-bottom: 5%;
}
}
.nav-active
{
transform: translateX(0%);
}
.imagetextremove
{
display: none;
}
@keyframes navLinkFade
{
from
{
opacity: 0;
transform: translateX(50px);
}
to
{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1
{
transform: rotate(-45deg) translate(-4px, 4px);
}
.toggle .line2
{
opacity: 0;
}
.toggle .line3
{
transform: rotate(45deg) translate(-6px, -6px);
}
/* Navigation Bar End */
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
const imageHeader = document.querySelector('.imageheader');
const imageText = document.querySelector('.imagetext');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Toggle Image Text
imageHeader.classList.toggle('imagetextremove');
imageText.classList.toggle('imagetextremove');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ``;
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.4}s`
}
//Burger Animation
burger.classList.toggle('toggle');
});
});
}
navSlide();
您是否在其他html页面中包含script.js?我解决了这个问题,它似乎是imageHeader和imageText的切换。因为我的所有页面上都没有这些类,所以脚本无法运行。因此,我删除了脚本的这一部分,它成功了。是的,我在所有页面中都包含了正确的链接/地址。