поэтому я делаю эту панель навигации, которая будет выделять кнопку в зависимости от раздела, в котором в данный момент находится пользователь, всякий раз, когда я повторно сохраняю файл, даже ничего не меняя, он будет работать правильно, выделяя цветом при нажатии или прокрутке, когда раздел измененный.
когда это работает, требуется только снова зарядить страницу и перестать работать, я неправильно реализую javascript?
import React from "react";
import FrontPage from './Routes/FrontPage'
import Products from './Routes/Products'
import Clients from './Routes/Clients'
import Contact from './Routes/Contact'
import {BsLinkedin} from 'react-icons/bs'
import {GrInstagram} from 'react-icons/gr'
function App() {
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll("nav .container ul li");
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
});
return (
<>
<nav>
<div className = "container">
<ul>
<li><img src='https://diagnosemlpdf.s3.us-east-2.amazonaws.com/landing/static+source/logos/myfutureai_blanco_logo.png' style = {{width:"80%", padding:"0" , margin:"0"}}/></li>
<li class = "Inicio active"><a href = "#Inicio">Inicio</a></li>
<li class = "Productos"><a href = "#Productos">Productos</a></li>
<li class = "Clientes"><a href = "#Clientes">Clientes</a></li>
<li class = "Contacto"><a href = "#Contacto">Contacto</a></li>
<li style = {{"position":"relative", "top":"2vw"}}><a href='https://www.linkedin.com/company/myfutureai/'><BsLinkedin/></a></li>
<div className='aristas'>
<li><a href='https://www.instagram.com/myfuture_ai/'><GrInstagram/></a></li>
<li><a href='https://twitter.com/myfuture_ai'><img style = {{"width": "100%", "margin":"0", "padding":"0"}} src='/twitter.png'/></a></li>
</div>
</ul>
</div>
</nav>
<section id = "Inicio">
<FrontPage/>
</section><section id = "Productos">
<Products/>
</section><section id = "Clientes">
<Clients/>
</section><section id = "Contacto">
<Contact/>
</section>
</>
);
}
export default App;
CSS__
/* _____NAVBAR CSS_______ */
nav {
width: 10vw;
height:100vh;
position: fixed;
top: 0;
background-color: white;
z-index: 1000;
}
.container{
display:flex;
flex-direction:column;
}
nav .container {
width: 10vw;
height:100vh;
margin: 0 auto;
text-align: center;
display: flex;
}
nav .container ul {
width:100%;
height: 100vh;
background-color: #000040;
display: flex;
flex-direction: column;
justify-content: space-around;
}
nav .container ul li {
display: inline-block;
}
nav .container ul li a {
display: inline-block;
text-decoration: none;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
}
nav .container ul li.active {
background-color: #5e17eb;
border-radius: 10px;
transition: 0.3s ease background-color;
}
nav .container ul li.active a {
color: rgb(255, 255, 255);
}
Я вернулся с ответом ... хотя логика javascript была в порядке, самый простой способ решить эту проблему в реакции js - это использовать REACT ROUTER V5 (в частности, "react-router-dom": "^ 5.2.0") --- у вас будут проблемы с v6--- и это дополнение для ссылки на разделы с той же страницы REACT ROUTER HASHLINK. это было намного проще, и стиль был в файле CSS, вот код:
идентификаторы, которые связывают хэш-код с разделом, находятся внутри файла каждого компонента.
import React from "react";
import FrontPage from './Routes/FrontPage'
import Products from './Routes/Products'
import Clients from './Routes/Clients'
import Contact from './Routes/Contact'
import { NavHashLink as Link } from "react-router-hash-link";
function App() {
return (
<><nav>
<Link to='#home' smooth>Inicio</Link>
<Link to='#about' smooth>Productos</Link>
<Link to='#clients' smooth>Clientes</Link>
<Link to='#contact' smooth>Contacto</Link>
</nav>
<section>
<FrontPage />
</section>
<section>
<Products />
</section>
<section>
<Clients />
</section>
<Contact />
</>
)
}
export default App;
в части css haslink может быть оформлен с использованием «a» в качестве ссылки. CSS
a{
color: white;
text-decoration: none;
font-size: 1.5rem;
margin-left: 15px;
}
a.active {
width: 90%;
color:#5e17eb;
border-right: 4px solid white;
transition:400ms ease-in ;
}