如何使用 Javascript 在 bootstrap 5 中使用 navbar-brand click 将选项卡更改为“home-tab”？

Question

这是我的第一个web开发项目，还请大家谅解。

我有一个 function Navbar()，它通过用导航栏 class 封装所有元素在我的网页上创建一个导航栏。“徽标”按钮使用导航栏品牌 class，它创建一个指向登录页面的链接按钮。 我正在使用 React Router Dom 来设置我所有页面的路径。

稍微解释一下代码......我在导航栏内使用导航标签 class 创建了动态标签。 它看起来像这样：

我遇到的问题是，当单击“徽标”按钮时，我希望将动态选项卡转到“主页”。

这里是我的全部 Navbar 代码。

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 启用 tabbable 选项卡。

在我的 Navbar() function 上方，我添加了const triggerEl = document.querySelector('#myTab button[data-bs-target="#home-tab-pane"]') bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

在“徽标”按钮 div 中，我认为添加 id='home-tab-pane' 会触发主页选项卡，但事实并非如此。 我完全是在猜测，所以任何帮助都是不可思议的。 很抱歉冗长的解释。 感谢您的阅读！

Answer 1

将 navbar-brand 重新组织为 nav-tabs 的子项，以便我能够发送 data-bs-toggle 和 data-bs-target，如下面的代码所示。 虽然这不会激活“主页”选项卡，但它会将页面和选项卡面板路由到单击时所需的位置。

该页面现在看起来像这样，对导航栏、选项卡和品牌进行了进一步的 HTML/CSS 自定义。

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