javascript - Bootstrap 4 tablist - 点击时切换标签

Question

我正在研究 React JS。

我已经在页面上实现了 bootstrap 4 tablist。

我还有一个侧面菜单，它是另一个组件。菜单有三个<Link />标签。当用户单击这些链接时，我想切换选项卡。

我的列表：

<div className="col-md-12">
            <ul className="nav nav-tabs responsive " role="tablist">
              <li className="nav-item">
                <a
                  className="nav-link active"
                  data-toggle="tab"
                  href="#home"
                  role="tab"
                >
                  Addresses
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="nav-link"
                  data-toggle="tab"
                  href="#profile"
                  role="tab"
                >
                  Contact Details
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="nav-link"
                  data-toggle="tab"
                  href="#messages"
                  role="tab"
                >
                  Relationships
                </a>
              </li>
            </ul>
          </div>

我的菜单：

<div className="bg-menu-collapse py-2 collapse-inner">
            <Link className="collapse-item" to="//home tab">
              Addresses
            </Link>
            <Link className="collapse-item" to="//profile tab">
              Contact Details
            </Link>
            <Link className="collapse-item" to="//messages tab">
              Relationships
            </Link>
          </div>

我怎样才能做到这一点？

标签： javascriptreactjstwitter-bootstrapbootstrap-4bootstrap-tabs