如何切换bulma中的选项卡

时间：2017-12-01 10:34:44

标签： html5 bulma

我＆＃39;尝试实现导航选项卡面板以切换选项卡。我浏览了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>

下面＆＃39; JSfiddle我试图继续努力。我想要＆＃34;在这里拍照＆＃34;仅在图片选项卡处于活动状态时显示，反之亦然

3 个答案:

答案 0 :(得分：9)

您应该将标签页和标签内容分隔为单独的容器。您可以使用data属性将标签与正确的内容进行匹配。

默认情况下将标签内容设置为隐藏，除非它具有类active。单击选项卡时，相应的选项卡内容将收到active。

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

EXIT_FAILURE

＆＃13;
＆＃13; 
$(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');
  });
});
＆＃13; 
#tab-content p {
  display: none;
}

#tab-content p.is-active {
  display: block;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

没有jQuery的示例

＆＃13;
＆＃13; 
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();
＆＃13; 
#tab-content p {
  display: none;
}

#tab-content p.is-active {
  display: block;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

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;
    }
  }

答案 2 :(得分：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";
    }

相关问题
最新问题