时间戳

首页 > 解决方案 > Bootstrap 5 - 以编程方式打开导航选项卡

javascript - Bootstrap 5 - 以编程方式打开导航选项卡

问题描述

我正在将引导程序 5 用于 vue 项目。我创建了一个组件，它有两个导航选项卡来显示一些内容，如果用户执行操作，我需要显示第二个选项卡。我正在使用 data 属性来触发正常的选项卡可视化，但我想在用户操作之后以编程方式显示第二个选项卡。谁能帮我？我已经尝试过使用此代码但没有用

    <nav class="nav mt-2 mb-2" role="tablist">
      <a class="nav-link active p-0 pr-2" role="tab" href="#program-tab" data-toggle="tab">Info</a>
      <a class="nav-link p-0 pr-2" role="tab" href="#download-tab" data-toggle="tab">Downloads</a>
    </nav>

<div class="row tab-pane fade m-0" id="download-tab" role="tabpanel" ref="downloadTab">...</div>



import { Tab } from 'bootstrap/dist/js/bootstrap.min.js'

data() {
  return {
    tab: null
  }
},
methods: {
  openTab() {
    this.tab = new Tab()
    console.log(this.tab)
    this.tab.getInstance(this.$refs.downloadTab).show()
  }
}

标签： javascriptvue.js

解决方案

推荐阅读