这是我的第一个网页开发项目,所以请原谅我的理解不足。
我有一个函数Navbar(),它通过用navbar类封装所有元素在我的网页上创建一个导航栏。“Logo”按钮使用navbar-brand类创建一个链接按钮,该按钮指向着陆页。我使用React Router Dom来访问我所有的页面。
为了解释一下代码...我在导航栏中使用nav-tabs类创建了动态标签。它看起来像这样:
我遇到的问题是,我希望在单击“徽标”按钮时,动态选项卡转到“主页”。
这是我的全部导航条代码。
export default function Navbar() {
return (
<>
{/* Encapsulating <nav> tag with navbar class to build navbar using Bootstrap */}
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
{/* "TITLE" Button */}
{/* Need to incorporate some event handler to switch to "Home-Tab" on click */}
<Link class="LinkStyle" to="/">
<div class="navbar-brand">Logo</div>
</Link>
{/* "Collapse" three-line Button*/}
{/* triggers when screen breakpoint is met with "navbar-expand-lg" */}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{/* Encapsulating <div> tag with collapse class to contain desired Tabs with "Collapse" button */}
<div class="collapse navbar-collapse" id="navbarSupportedContent">
{/* <ul> tag with Dynamic Tabbed Interfaces */}
<ul class="nav nav-tabs nav-fill ms-auto" id="myTab" role="tablist">
{/* Home Tab */}
<li class="nav-item" role="presentation">
<Link class="LinkStyle" to="/">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
</Link>
</li>
{/* Drop Down Menu for "Services" linking to different pages */}
{/* It is not recommended to use drop down menu in a Dynamic Tabbed interface for accessibility users. Test using voiceover and optimize. */}
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle" id="services-tab" data-bs-toggle="dropdown" aria-expanded="false">Services</button>
<ul class="dropdown-menu">
{/* All Services dropdown button */}
<li><Link to="/" class="LinkStyle">
<button class="dropdown-item" id="all_services-tab" data-bs-toggle="tab" data-bs-target="#all-services-tab-pane" type="button" role="tab" aria-controls="nav-all-services" aria-selected="false">All Services</button>
</Link></li>
<li><hr class="dropdown-divider"></hr></li>
{/* Service1 dropdown button */}
<li>
<Link to="/service1" class="LinkStyle">
<button class="dropdown-item" id="service1-tab" data-bs-toggle="tab" data-bs-target="#service1-tab-pane" type="button" role="tab" aria-controls="nav-service1" aria-selected="false">Service1</button>
</Link></li>
{/* Service2 dropdown button */}
<li><Link to="/service2" class="LinkStyle">
<button class="dropdown-item" id="service2-tab" data-bs-toggle="tab" data-bs-target="#service2-tab-pane" type="button" role="tab" aria-controls="nav-service2" aria-selected="false">Service2</button>
</Link></li>
</ul>
</li>
{/* FAQs Tab */}
<li class="nav-item" role="presentation">
<Link class="LinkStyle" to="/FAQs">
<button class="nav-link" id="faqs-tab" data-bs-toggle="tab" data-bs-target="#faqs-tab-pane" type="button" role="tab" aria-controls="faqs" aria-selected="false">FAQs</button>
</Link></li>
{/* About Tab */}
<li class="nav-item" role="presentation">
<Link class="LinkStyle" to="/about">
<button class="nav-link" id="about-tab" data-bs-toggle="tab" data-bs-target="#about-tab-pane" type="button" role="tab" aria-controls="about" aria-selected="false">About</button>
</Link></li>
</ul>
</div>
</div>
</nav>
{/* PLACE THIS CODE UNDERNEATH NAV BAR*/}
<div class="tab-content" style={{textAlign: "center", marginTop: 50}} id="myTabContent">
<div class="tab-pane show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0"><h4 role="presentation">Insert Desired Home-Tab-Pane</h4></div>
<div class="tab-pane " id="service1-tab-pane" role="tabpanel" aria-labelledby="service1-tab" tabindex="0"><h4 role="presentation">Insert Desired Service1-Tab-Pane</h4></div>
<div class="tab-pane " id="service2-tab-pane" role="tabpanel" aria-labelledby="service2-tab" tabindex="0"><h4 role="presentation">Insert Desired Service2-Tab-Pane</h4></div>
<div class="tab-pane " id="all-services-tab-pane" role="tabpanel" aria-labelledby="all-services-tab" tabindex="0"><h4 role="presentation">Insert Desired all-services-Tab-Pane (3)</h4></div>
<div class="tab-pane " id="faqs-tab-pane" role="tabpanel" aria-labelledby="faqs-tab" tabindex="0"><h4 role="presentation">Insert Desired Faqs-Tab-Pane</h4></div>
<div class="tab-pane " id="about-tab-pane" role="tabpanel" aria-labelledby="about-tab" tabindex="0"><h4 role="presentation">Insert Desired About-Tab-Pane</h4></div>
</div>
</>
);
}
在 Bootstrap 文档https://getbootstrap.com/docs/5.3/components/navs-tabs/#via-javascript中,我尝试使用他们的方法通过JavaScript启用可切换标签。
在Navbar()函数上方,我添加了const triggerEl = document.querySelector('#myTab button[data-bs-target="#home-tab-pane"]') bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
在“Logo”按钮div中,我以为添加id ='home-tab-pane'会触发主页标签,但它没有。我完全是在猜测,所以任何帮助都是难以置信的。抱歉,解释太长了。谢谢你的阅读!
1条答案
按热度按时间sulc1iza1#
将navbar-brand重新组织为nav-tabs的子元素,这样我就可以发送data-bs-toggle和data-bs-target,如下面的代码所示,虽然这不会激活“home”标签,但它会将页面和标签面板路由到所需的位置。
页面现在看起来如下所示,并对导航栏、选项卡和品牌进行了进一步的HTML/CSS定制。x1c 0d1x