如何在布尔玛中切换选项卡

问题描述 投票：0回答：5

我尝试实现一个导航选项卡面板来切换选项卡。我浏览了 Bulma 文档但找不到任何内容。这是示例代码

<div class="tabs is-toggle is-fullwidth">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fa fa-image"></i></span>
        <span>Pictures</span>
      </a>
      <p>
      Here goes pictures
      </p>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fa fa-music"></i></span>
        <span>Music</span>
      </a>
       <p>
      Here goes music
      </p>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fa fa-film"></i></span>
        <span>Videos</span>
      </a>
       <p>
      Here goes music
      </p>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
        <span>Documents</span>
      </a>
       <p>
      Here goes music
      </p>
    </li>
  </ul>
</div>

这里是我正在尝试的JSfiddle。我希望“这里是图片”仅在图片选项卡处于活动状态时显示，反之亦然

html bulma
5个回答
18
投票

您应该将选项卡和选项卡内容分离到单独的容器中。您可以使用 

data
属性将选项卡与正确的内容匹配。

将选项卡内容设置为默认隐藏，除非它具有类 

active
。当您点击某个选项卡时，相应的选项卡内容会收到 
active
。

您可以根据需要使用更合适的元素和类/ID 名称更新下面的小提琴/片段。

小提琴

$(document).ready(function() {
  $('#tabs li').on('click', function() {
    var tab = $(this).data('tab');

    $('#tabs li').removeClass('is-active');
    $(this).addClass('is-active');

    $('#tab-content p').removeClass('is-active');
    $('p[data-content="' + tab + '"]').addClass('is-active');
  });
});
#tab-content p {
  display: none;
}

#tab-content p.is-active {
  display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs is-toggle is-fullwidth" id="tabs">
  <ul>
    <li class="is-active" data-tab="1">
      <a>
        <span class="icon is-small"><i class="fa fa-image"></i></span>
        <span>Pictures</span>
      </a>
    </li>
    <li data-tab="2">
      <a>
        <span class="icon is-small"><i class="fa fa-music"></i></span>
        <span>Music</span>
      </a>
    </li>
    <li data-tab="3">
      <a>
        <span class="icon is-small"><i class="fa fa-film"></i></span>
        <span>Videos</span>
      </a>
    </li>
    <li data-tab="4">
      <a>
        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>
<div id="tab-content">
  <p class="is-active" data-content="1">
    Pictures
  </p>
  <p data-content="2">
    Music
  </p>
  <p data-content="3">
    Videos
  </p>
  <p data-content="4">
    Documents
  </p>
</div>

没有 jQuery 的示例

const TABS = [...document.querySelectorAll('#tabs li')];
const CONTENT = [...document.querySelectorAll('#tab-content p')];
const ACTIVE_CLASS = 'is-active';

function initTabs() {
    TABS.forEach((tab) => {
      tab.addEventListener('click', (e) => {
        let selected = tab.getAttribute('data-tab');
        updateActiveTab(tab);
        updateActiveContent(selected);
      })
    })
}

function updateActiveTab(selected) {
  TABS.forEach((tab) => {
    if (tab && tab.classList.contains(ACTIVE_CLASS)) {
      tab.classList.remove(ACTIVE_CLASS);
    }
  });
  selected.classList.add(ACTIVE_CLASS);
}

function updateActiveContent(selected) {
  CONTENT.forEach((item) => {
    if (item && item.classList.contains(ACTIVE_CLASS)) {
      item.classList.remove(ACTIVE_CLASS);
    }
    let data = item.getAttribute('data-content');
    if (data === selected) {
      item.classList.add(ACTIVE_CLASS);
    }
  });
}

initTabs();
#tab-content p {
  display: none;
}

#tab-content p.is-active {
  display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet" />
<div class="tabs is-toggle is-fullwidth" id="tabs">
  <ul>
    <li class="is-active" data-tab="1">
      <a>
        <span class="icon is-small"><i class="fa fa-image"></i></span>
        <span>Pictures</span>
      </a>
    </li>
    <li data-tab="2">
      <a>
        <span class="icon is-small"><i class="fa fa-music"></i></span>
        <span>Music</span>
      </a>
    </li>
    <li data-tab="3">
      <a>
        <span class="icon is-small"><i class="fa fa-film"></i></span>
        <span>Videos</span>
      </a>
    </li>
    <li data-tab="4">
      <a>
        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>
<div id="tab-content">
  <p class="is-active" data-content="1">
    Pictures
  </p>
  <p data-content="2">
    Music
  </p>
  <p data-content="3">
    Videos
  </p>
  <p data-content="4">
    Documents
  </p>
</div>

4
投票

另一种不需要数据属性的解决方案（使用索引）。

HTML：

  <div class="column is-12 tabs is-medium">
    <ul>
      <li class="is-active"><a>Tab 1</a></li>
      <li><a>Tab 2</a></li>
    </ul>
  </div>
  <div class="column is-12 tabs-content">
    <div class="tab-content is-active">
      <p>Content 1</p>
    </div>
    <div class="tab-content">
      <p>Content 2</p>
    </div>
  </div>

JS (jQuery):

     $('.tabs').each(function(index) {
      var $tabParent = $(this);
      var $tabs = $tabParent.find('li');
      var $contents = $tabParent.next('.tabs-content').find('.tab-content');

      $tabs.click(function() {
        var curIndex = $(this).index();
        // toggle tabs
        $tabs.removeClass('is-active');
        $tabs.eq(curIndex).addClass('is-active');
        // toggle contents
        $contents.removeClass('is-active');
        $contents.eq(curIndex).addClass('is-active');
      });
    });

SCSS：

  .tab-content {
    display: none;

    &.is-active {
      display: block;
    }
  }
1
投票

这里是 Angular CLI 的代码，以防有人需要，复制粘贴就可以了。 （没有检查html）

这是html：

<div class="container">
    
    <section class="box" >
          <section class="hero is-dark">
              <div class="hero-body">
                <div class="container has-text-centered">
                    <h1 class="title">
                        head title here
                    </h1>
                </div>
              </div> 

              <div class="hero-foot">
                  <nav class="tabs is-boxed is-fullwidth is-medium">
                      <div class="container">
                      <ul>
                          <li class="tab is-active" (click)="openTab($event, 'id_tab_1')"><a >tab 1 title</a></li>
                          <li class="tab" (click)="openTab($event, 'id_tab_2')"><a >tab 2 title</a></li>
                          <li class="tab" (click)="openTab($event, 'id_tab_3')"><a >tab 3 title</a></li>
                      </ul>
                      </div>
                  </nav>
              </div>
          </section>        
          <div class="container section">
              <div id="id_tab_1" class="content-tab">
                  <div>
                      content here
                  </div>
              </div>
              <div id="id_tab_2" class="content-tab" style="display:none">
                  <div>
                      content here
                  </div>
              </div>
              <div id="id_tab_3" class="content-tab" style="display:none">
                  <div>
                     content here
                  </div>
              </div>
          </div>
      </section>
</div>

这是您的组件的打字稿，无需使用此版本创建变量，它基本上就像您在 javascript 中所做的那样。使用 viewchild 等可以更好地适应 Angular。 

   
   
   openTab(event: any, tabName) {
      var i, x, tablinks;
      x = document.getElementsByClassName("content-tab");
      for (i = 0; i < x.length; i++) {
          x[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tab");
      for (i = 0; i < x.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" is-active", "");
      }
      document.getElementById(tabName).style.display = "block";
      event.currentTarget.className += " is-active";
    }

0
投票

import React, { useState } from 'react';
import styled from 'styled-components';

const TabWrapper = styled.div``;

const allTypes = ['New Arrivals', 'Best Sellers', 'On Sale'];

const ArrivalType = () => {
  const [active, setActive] = useState(allTypes[0]);
  return (
    <TabWrapper className="tabs is-centered">
      <ul>
        {allTypes.map((type) => (
          <li
            className={active === type && 'is-active'}
            key={type}
            aria-hidden
            onClick={() => setActive(type)}>
            <a>{type}</a>
          </li>
        ))}
      </ul>
    </TabWrapper>
  );
};

export default ArrivalType;
0
投票

如果您使用 alpine.js，您可以通过以下方式完成：

<div class="tabs is-toggle" x-data="{ one: true, 
                                      two: false, 
                                      three: false,
                                     }">
     <ul>
        <li x-bind:class="one ? 'is-active' : ''" >         
         <a x-on:click="one = true; two = false; three = false"
            >
           
           <p>FIRST</p>
           
         </a>
       </li>
       <li x-bind:class="two ? 'is-active' : ''" >
         <a x-on:click="two = true; one = false; three = false">
           
           <p>SECOND</p>
           
         </a>
       </li>
       <li x-bind:class="three ? 'is-active' : ''" >
         <a x-on:click="three = true; one = false; two = false">
           
           <p>THIRD</p> 
          
         </a>
       </li>
     </ul>
  </div>

最简单的解决方案！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.