如何在bootstrap 5中使用Javascript通过导航栏品牌点击将选项卡更改为“主页选项卡”?

pw9qyyiw  于 2023-01-22  发布在  Bootstrap
关注(0)|答案(1)|浏览(136)

这是我的第一个网页开发项目,所以请原谅我的理解不足。
我有一个函数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'会触发主页标签,但它没有。我完全是在猜测,所以任何帮助都是难以置信的。抱歉,解释太长了。谢谢你的阅读!

sulc1iza

sulc1iza1#

将navbar-brand重新组织为nav-tabs的子元素,这样我就可以发送data-bs-toggle和data-bs-target,如下面的代码所示,虽然这不会激活“home”标签,但它会将页面和标签面板路由到所需的位置。
页面现在看起来如下所示,并对导航栏、选项卡和品牌进行了进一步的HTML/CSS定制。x1c 0d1x

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">

      {/* <ul> tag encapsulates entire Dynamic Tabbed Interface */}
      <ul class="nav nav-tabs nav-fill mx-auto" id="myTab" role="tablist">
        
        {/* "TITLE" Button encapsulated with it's own container */}
        <div class="container-fluid">
        <li class="nav-item">
          <Link class="LinkStyle" to="/">
            <div class="navbar-brand" data-bs-toggle="tab" data-bs-target="#home-tab-pane" aria-controls="nav-home" aria-selected="false">Florida Lawnscapers, LLC</div>
          </Link>
        </li>
        </div>
        
      {/* "Collapse" three-line Button*/}
      {/* triggers when screen breakpoint is met with "navbar-expand-lg" */}
      <button class="navbar-toggler my-auto mx-auto" 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>
...

相关问题