Bulma CSS 选项卡切换器答案

【问题标题】：Bulma CSS tab switcherBulma CSS 选项卡切换器
【发布时间】：2017-07-03 18:16:01
【问题描述】：

如何在 Bulma CSS 框架中制作类似 ajax 的标签切换器？如何以简单的方式制作它？或者我应该使用什么框架来解决这个任务？

绕过 github 错误的一些文本 一些文本绕过 github 错误 一些文本绕过 github 错误 一些文本绕过 github 错误

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="tabs is-centered">
    <ul>
      <li class="is-active">
        <a>
        <span class="icon is-small"><i class="fa fa-html5"></i></span>
        <span>All</span>
      </a>
      </li>
      <li>
        <a>
        <span class="icon is-small"><i class="fa fa-tablet"></i></span>
        <span>Adaptive design</span>
      </a>
      </li>
      <li>
        <a>
        <span class="icon is-small"><i class="fa fa-file-code-o"></i></span>
        <span>jQuery</span>
      </a>
      </li>
      <li>
        <a>
        <span class="icon is-small"><i class="fa fa-cog"></i></span>
        <span>AJAX</span>
      </a>
      </li>
      <li>
        <a>
        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
        <span>AngularJS</span>
      </a>
      </li>
    </ul>
    <!--/tabs is-centered-->
  </div>

【问题讨论】：

标签： javascript ajax bulma

【解决方案1】：

如果我正确理解了您的问题，您总是希望在切换标签时保持在同一页面上，但每个“标签页”上的内容不同。请在下面的 sn-p 中看看我是如何做到的。不过，可能还有更多方法可以做到这一点......

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body>
  <div class="tabs is-centered">
    <ul>
      <li id="all-tab" class="is-active">
        <a onClick="switchToAll()">
        <span class="icon is-small"><i class="fa fa-html5"></i></span>
        <span>All</span>
      </a>
      </li>
      <li id="adaptivedesign-tab">
        <a onClick="switchToAdaptiveDesign()">
        <span class="icon is-small"><i class="fa fa-tablet"></i></span>
        <span>Adaptive design</span>
      </a>
      </li>
      <li id="jquery-tab">
        <a onClick="switchToJquery()">
        <span class="icon is-small"><i class="fa fa-file-code-o"></i></span>
        <span>jQuery</span>
      </a>
      </li>
      <li id="ajax-tab">
        <a onClick="switchToAjax()">
        <span class="icon is-small"><i class="fa fa-cog"></i></span>
        <span>AJAX</span>
      </a>
      </li>
      <li id="angularjs-tab">
        <a onClick="switchToAngularJS()">
        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
        <span>AngularJS</span>
      </a>
      </li>
    </ul>
    <!--/tabs is-centered-->
  </div>

  <div class="container">
    <div id="all-tab-content">
      <h1 class="title is-1" style="text-align:center;">Here will be the contents of the "All" tab</h1>
    </div>
    <div class="is-hidden" id="adaptivedesign-tab-content">
      <h1 class="title is-1" style="text-align:center;">Here will be the contents of the "Adaptive Design" tab</h1>
    </div>
    <div class="is-hidden" id="jquery-tab-content">
      <h1 class="title is-1" style="text-align:center;">Here will be the contents of the "jQuery" tab</h1>
    </div>
    <div class="is-hidden" id="ajax-tab-content">
      <h1 class="title is-1" style="text-align:center;">Here will be the contents of the "AJAX" tab</h1>
    </div>
    <div class="is-hidden" id="angularjs-tab-content">
      <h1 class="title is-1" style="text-align:center;">Here will be the contents of the "AngularJS" tab</h1>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    function switchToAll() {
      removeActive();
      hideAll();
      $("#all-tab").addClass("is-active");
      $("#all-tab-content").removeClass("is-hidden");
    }

    function switchToAdaptiveDesign() {
      removeActive();
      hideAll();
      $("#adaptivedesign-tab").addClass("is-active");
      $("#adaptivedesign-tab-content").removeClass("is-hidden");
    }

    function switchToJquery() {
      removeActive();
      hideAll();
      $("#jquery-tab").addClass("is-active");
      $("#jquery-tab-content").removeClass("is-hidden");
    }

    function switchToAjax() {
      removeActive();
      hideAll();
      $("#ajax-tab").addClass("is-active");
      $("#ajax-tab-content").removeClass("is-hidden");
    }

    function switchToAngularJS() {
      removeActive();
      hideAll();
      $("#angularjs-tab").addClass("is-active");
      $("#angularjs-tab-content").removeClass("is-hidden");
    }

    function removeActive() {
      $("li").each(function() {
        $(this).removeClass("is-active");
      });
    }

    function hideAll(){
      $("#all-tab-content").addClass("is-hidden");
      $("#adaptivedesign-tab-content").addClass("is-hidden");
      $("#jquery-tab-content").addClass("is-hidden");
      $("#ajax-tab-content").addClass("is-hidden");
      $("#angularjs-tab-content").addClass("is-hidden");
    }
  </script>
</body>

</html>

【讨论】：

不错的独立示例，有点不幸的是它使用了 jQuery。我还找到了this codepen，它提供了另一个不依赖 jQuery 的好例子。
可能是我遇到的最干净的例子。不过，我用 Javascript 替换了所有 jQuery。

【解决方案2】：

您可以在 Bulma 中使用 javascript 做的更短一些，而无需创建 7 个函数或导入 jQuery，只使用 2 个类和 1 个函数，见下文，

CSS

.tabcontent {
    display: none;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

HTML

<div class="tabs is-centered">
    <ul>
      <li id="tablinks">
        <a onclick="openTab(event, 'Overview')">
        <span class="icon is-large"><i class="fa fa-2x fa-html5 blue"></i></span>
        <span>Overview</span>
      </a>
      </li>
      <li id="tablinks">
        <a onclick="openTab(event, 'Details')">
        <span class="icon is-large"><i class="fa fa-2x fa-tablet blue"></i></span>
        <span>Details</span>
      </a>
      </li>
      <li id="tablinks">
        <a onclick="openTab(event, 'Specification')">
        <span class="icon is-large"><i class="fa fa-2x fa-file-code-o blue"></i></span>
        <span>Specification</span>
      </a>
      </li>
      <li id="tablinks">
         <a onclick="openTab(event, 'Reviews')">
        <span class="icon is-large"><i class="fa fa-2x fa-cog blue"></i></span>
        <span>Reviews</span>
      </a>
      </li>
    </ul>
    <!--/tabs is-centered-->
  </div>

JAVASCRIPT

function openTab(evt, tabTitle) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabTitle).style.display = "block";
    evt.currentTarget.className += " active";
}

您可以添加一个活动类并对其进行调整以适应该示例，尽管此示例实际上没有活动类！。使用 Font Awesome。

GitHub 上的示例代码minimallinux

【讨论】：

我真的很喜欢这个解决方案，没有 jquery，代码最少。但是，我必须解决 3 或 4 个问题才能使其正常工作。不知道是我的问题，还是我的错误。 1) 在 evt.currentTarget 之后添加 .parentElement 2) 必须从 github 获取内容 3) 将第二个 getElementsByClassName 更改为 getElementsByName，4) 更改 'li' id->name 5) 使用在函数外部单击来初始化所选/是-active 选项卡 6）将两个地方的“active”更改为“-is-active”（active 不是 bulma 类）。尽管进行了所有这些修复，但这是我见过的“最轻”的 JS 解决方案。

【解决方案3】：

对 Sebastian Delgado 使用 vanilla JS 的解决方案稍加简化：

document.addEventListener('DOMContentLoaded', () => {
  const tabs = document.querySelectorAll('.tab')
  if (tabs === undefined) return

  tabs.forEach((tab) => {
    tab.addEventListener('click', (e) => {
      // event.currentTarget refers to element on which
      // the event listener was attached
      const tabName = e.currentTarget.attributes[1].nodeValue
      const currentTab = document.querySelector('.tab.is-active')
      const currentContent = document.getElementById(`${currentTab.id}-content`)
      const newTab = document.getElementById(tabName)
      const newTabContent = document.getElementById(`${tabName}-content`)

      currentTab.classList.remove('is-active')
      currentContent.classList.add('is-hidden')

      newTab.classList.add('is-active')
      newTabContent.classList.remove('is-hidden')
    })
  })
})

【讨论】：

【解决方案4】：

Bulma CSS 没有最好的 Javascript 实现集合，因为它的动机是成为一个纯 CSS 的框架。

如果您对 Javascript、jQuery、AJAX 不太熟悉，我建议您采用其他框架，例如 Bootstrap 或 Materialize CSS。

实现您正在寻找的功能的简单示例：-

https://jqueryui.com/tabs/#ajax

【讨论】：

【解决方案5】：

更好的解决方案是创建一个可以处理所有选项卡的方法，而不是为每个选项卡创建一个方法，您需要使用 id 来区分它们，方法如下：

HTML

    <div class="columns">
        <div class="column">
            <div class="tabs is-centered">
              <ul>
                <li id='insights-tab' class="tab is-active">
                    <a>
                        <span class="icon is-small"><i class="far fa-chart-bar"></i></span>
                        <span>Insights</span>
                    </a>
                </li>
                <li id='registerAgent-tab' class="tab">
                    <a>
                        <span class="icon is-small"><i class="fas fa-user-plus"></i></span>
                        <span>Register Agent</span>
                    </a>
                </li>
                <li id='options-tab' class="tab">
                    <a>
                        <span class="icon is-small"><i class="fas fa-cogs"></i></span>
                        <span>Options</span>
                    </a>
                </li>
              </ul>
            </div>
        </div>
    </div>

    <div class="columns">
        <div class="column">
        <div id="insights-tab-content">
          <p>Insights</p>
        </div>

        <div class="hidden" id="registerAgent-tab-content">
          <p>Register Agent</p>
        </div>


        <div class="hidden" id="options-tab-content">
          <p>Options</p>
        </div>
        </div>
    </div>

</div>

JAVASCRIPT

var ready = () => {

    $('.tab').on('click', (e) => {
        var tabName = (e.currentTarget.attributes[0].nodeValue);
        removeActive();
      hideAll();
      console.log(tabName)
      $('#' + tabName).addClass('is-active');
      $('#' + tabName + '-content').removeClass('hidden');
    });

    var removeActive = () => {
      $('li').each(function() {
        $(this).removeClass('is-active');
      });
    }

    var hideAll = () => {
      $('#registerAgent-tab-content').addClass('hidden');
      $('#insights-tab-content').addClass('hidden');
      $('#options-tab-content').addClass('hidden');
    }

}

$(document).ready(ready);
$(document).on("page:load", ready);

CSS

.hidden{ display: none; }

【讨论】：