Bootstrap 5通过数据属性来实现tab切换功能

Bootstrap 5通过数据属性来实现tab切换功能。

data-bs-toggle: ''"  
data-bs-target 
type="button" 
role="tab"

Using data attributes

不用JavaScript就能激活一个tab或者pill导航（pill navigation), 通过简单的在元素上设置  data-bs-toggle="tab" 或者 data-bs-toggle="pill"。
在 .nav-tabs 或者 .nav-pills上 使用这些数据属性。

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-bs-toggle="tab" or data-bs-toggle="pill" on an element. Use these data attributes on .nav-tabs or .nav-pills.


= form_for [:weapp, item=@weapp_base_info] do |f|
  .d-flex.align-items-start
    .nav.flex-column.nav-pills.me-3 id='v-pills-tab' role='tablist'
      button.nav-link.active id="v-pills-home-tab" data-bs-toggle="tab" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="home" aria-selected="true" 公司信息
      button.nav-link id="v-pills-nick-tab"        data-bs-toggle="tab" data-bs-target="#v-pills-nick" type="button" role="tab" aria-controls="nick"  基础
      button.nav-link id="v-pills-domain-tab"      data-bs-toggle="tab" data-bs-target="#v-pills-domain" type="button" role="tab" aria-controls="domain"  域名配置
      button.nav-link id="v-pills-signature-tab"   data-bs-toggle="tab" data-bs-target="#v-pills-signature" type="button" role="tab" aria-controls="signature" 功能介绍
      button.nav-link id="v-pills-plugin-tab"      data-bs-toggle="tab" data-bs-target="#v-pills-plugin"  type="button" role="tab" aria-controls="plugin" 插件管理
      button.nav-link id="v-pills-bind-tab"        data-bs-toggle="tab" data-bs-target="#v-pills-bind"  type="button" role="tab" aria-controls="bind" 体验用户
      button.nav-link id="v-pills-template-tab"    data-bs-toggle="tab" data-bs-target="#v-pills-template"  type="button" role="tab" aria-controls="template" 发布
      button.nav-link id="v-pills-cloud-tab"       data-bs-toggle="tab" data-bs-target="#v-pills-cloud"  type="button" role="tab" aria-controls="cloud" 云配置

    .tab-content id="v-pill-tabContent" style="flex: 1"
      .tab-pane.fade.show.active id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"
        =render 'form_home', f: f, item: item
      .tab-pane.fade id="v-pills-nick" role="tabpanel" aria-labelledby="v-pills-nick-tab"
        =render 'form_nick', f: f, item: item
      .tab-pane.fade id="v-pills-domain" role="tabpanel" aria-labelledby="v-pills-domain-tab"
        =render 'form_domain', f: f, item: item
      .tab-pane.fade id="v-pills-signature" role="tabpanel" aria-labelledby="v-pills-signature-tab"
        =render 'form_signature', f: f, item: item
      .tab-pane.fade id="v-pills-plugin" role="tabpanel" aria-labelledby="v-pills-plugin-tab"
        =render 'form_plugin', f: f, item: item
      .tab-pane.fade id="v-pills-bind" role="tabpanel" aria-labelledby="v-pills-bind-tab"
        =render 'form_bind', f: f, item: item
      .tab-pane.fade id="v-pills-template" role="tabpanel" aria-labelledby="v-pills-template-tab"
        =render 'form_template', f: f, item: item
      .tab-pane.fade id="v-pills-cloud" role="tabpanel" aria-labelledby="v-pills-cloud-tab"
        =render 'form_cloud', f: f, item: item

  p
    = f.submit '保存', class: 'btn btn-primary btn-lg', style: 'width: 100%'
  p
    - if item.persisted?
      = link_to '查看', weapp_weapp_base_info_path(item), class: 'btn btn-success btn-lg', style: 'width: 100%'
阅读量: 460
发布于:
修改于: