Javascript Toogle选定链接上的活动类
我有一个菜单列表，当你在大屏幕上悬停并点击小屏幕时，它会打开一个大菜单 现在，当mega菜单打开时，我希望能够添加一个自定义类，例如active类，这样我就可以为移动设备设置mega菜单的样式 但是，当我单击链接时，它会为所有链接添加类或id。我想为单击的链接添加一个类或idJavascript Toogle选定链接上的活动类,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我有一个菜单列表，当你在大屏幕上悬停并点击小屏幕时，它会打开一个大菜单 现在，当mega菜单打开时，我希望能够添加一个自定义类，例如active类，这样我就可以为移动设备设置mega菜单的样式 但是，当我单击链接时，它会为所有链接添加类或id。我想为单击的链接添加一个类或id import React, {useState} from "react"; import { Navbar, Nav, Container } from "react-bootstrap&q
import React, {useState} from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import { FaArrowRight } from "react-icons/fa";
import Button from "react-bootstrap/Button";
import LogoTransparent from "../../images/logo/logo-reverse.png";
import LogoWhite from "../../images/logo/logo-white.png";
const TransparentNavbar = (props) => {
// check if the background is transparent to return corresponding logo.
let LogoType;
if (props.bgLogo === "transparent") {
LogoType = LogoTransparent;
} else {
LogoType = LogoWhite;
}
const [active, setActive] = useState(false)
return (
<Navbar
collapseOnSelect
expand={props.bgExpand}
bg={props.bgIntrinsic}
variant={props.bgVariant}
sticky={props.bgSticky}
fixed={props.bgFixed}
className={props.bgColor}
>
<Container>
<Navbar.Brand className="navbar-brand-margin" href="#home">
<img
src={LogoType}
className="d-inline-block align-top"
alt=""
/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">
<Nav.Link id={active ? 'open' : ''} className={ props.bgtextColor + " " + props.bgExpandBtn} onClick={() => setActive(!active)} >
About Us
<div className="mega-menu">
<div className="content">
<div className="col first-col">
<section>
<ul className="mega-links expandable">
<a
href="/about/company-overview"
className="mega-menu-links-white-bg"
>
<li>Company Overview</li>
</a>
<a
href="/about/partners"
className="mega-menu-links-white-bg"
>
<li>Partners</li>
</a>
<a
href="/about/mission-vision-core-values"
className="mega-menu-links-white-bg"
>
<li>Mission, Vision & Core Values</li>
</a>
<a
href="/about/management-team"
className="mega-menu-links-white-bg"
>
<li>Management Team</li>
</a>
<a
href="/board-of-directors"
className="mega-menu-links-white-bg"
>
<li>Board of Directors</li>
</a>
</ul>
</section>
</div>
<div className="col second-col">
<section>
<div className="mega-menu-text">
<p>
We focus on delivering digital solutions to our
clients such that high value can be derived with a
huge ROI. We have experience and expertise in
providing such a digital transformation program to
alleviate clients' pain point and position such
clients for efficient and effective operation with a
high possibility of increasing their revenue and
profit at the same time.
</p>
<div className="mega-menu-button">
<Button
variant="outline-primary"
className="primary-mega-button shadow-none"
>
Read More
<FaArrowRight />
</Button>
</div>
</div>
</section>
</div>
<div className="col third-col">
<section>
<h5 className="mega-menu-image-header-text">
*** Limited is a leading Africa Technology
and Digital Consulting Firm
</h5>
<a href="#" className="img-wrapper">
<span className="img">
<img
className="w-100"
src="https://picsum.photos/400?random=1"
alt="Random Image"
/>
</span>
</a>
</section>
</div>
</div>
</div>
</Nav.Link>
{/* Solutions links */}
<Nav.Link id={active ? 'open' : ''} className={props.bgtextColor + " " + props.bgExpandBtn} onClick={() => setActive(!active)}>
Solutions
<div className="mega-menu">
<div className="content">
<div className="col first-col">
<section>
<ul className="mega-links expandable">
<a
href="/about/company-overview"
className="mega-menu-links-white-bg"
>
<li>Digital Culture</li>
</a>
<a
href="/about/partners"
className="mega-menu-links-white-bg"
>
<li>Identity & Access Management</li>
</a>
<a
href="/about/mission-vision-core-values"
className="mega-menu-links-white-bg"
>
<li>Cyber Security</li>
</a>
<a
href="/about/management-team"
className="mega-menu-links-white-bg"
>
<li>Management Team</li>
</a>
<a
href="/board-of-directors"
className="mega-menu-links-white-bg"
>
<li>DevOps Services</li>
</a>
</ul>
</section>
</div>
<div className="col second-col-link">
<section>
<ul className="mega-links second">
<a
href="/about/company-overview"
className="mega-menu-links-white-bg"
>
<li>Managed IT Infrastructure</li>
</a>
<a
href="/about/partners"
className="mega-menu-links-white-bg"
>
<li>Digital Transformation (DX)</li>
</a>
<a
href="/about/mission-vision-core-values"
className="mega-menu-links-white-bg"
>
<li>Technology Consulting & Advisory Service</li>
</a>
<a
href="/about/management-team"
className="mega-menu-links-white-bg"
>
<li>Cloud Computing (Microsoft, SAP) Team</li>
</a>
</ul>
</section>
</div>
<div className="col third-col">
<section>
<h5 className="mega-menu-image-header-text">
is a leading Africa Technology
and Digital Consulting Firm
</h5>
<a href="#" className="img-wrapper">
<span className="img">
<img
className="w-100"
src="https://picsum.photos/400?random=1"
alt="Random Image"
/>
</span>
</a>
</section>
</div>
</div>
</div>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};
export default TransparentNavbar;
import React，{useState}来自“React”；
从“react bootstrap”导入{Navbar、Nav、Container}；
从“react icons/fa”导入{FaArrowRight}；
从“反应引导/按钮”导入按钮；
从“../../images/logo/logo reverse.png”导入LogoTransparent；
从“../../images/logo/logo white.png”导入logowite；
const TransparentNavbar=（道具）=>{
//检查背景是否透明，以返回相应的徽标。
让标识；
if（props.bgLogo==“透明”）{
标识类型=透明标识；
}否则{
标识类型=标识白色；
}
const[active，setActive]=useState（false）
返回(
设置活动（！活动）}>
关于我们
我们专注于为客户提供数字解决方案
客户机，以便通过
巨大的投资回报率。我们在这方面拥有丰富的经验和专业知识
提供这样一个数字转换程序
缓解客户的痛点，并定位
为客户提供高效、高效的运营
增加收入和利润的可能性很高
同时获利。
阅读更多
***有限公司是非洲领先的技术公司
和数字咨询公司
{/*解决方案链接*/}
设置活动（！活动）}>
解决
是非洲领先的技术
和数字咨询公司
);
};
导出默认的TransparentNavbar；
例如
从“react router dom”导入{NavLink}
公司概况
而不是：：