布尔玛 CSS 标签切换器

Question

如何在 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>

Answer 1

如果我正确理解了你的问题，你总是希望在切换选项卡时停留在同一页面上，但每个选项卡上的内容不同 "tab page"。请在下面的代码片段中看看我是如何做到的。不过可能还有更多方法...

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

Answer 2

Bulma CSS 没有 Javascript 实施的最佳集合，因为它的动机是成为一个 CSS 唯一的框架。

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

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

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

Answer 3

在 Bulma 中，您可以使用 javascript 缩短一些时间，而无需创建 7 个函数或导入 jQuery，仅使用 2 个 classes 和 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";
}

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

GitHub minimallinux

上的示例代码

Answer 4

更好的解决方案是创建一个可以处理所有选项卡的方法，而不是每个方法一个方法，您需要使用 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; }

Answer 5

使用 vanilla JS 对 Sebastian Delgado 的解决方案进行了稍微简化：

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')
    })
  })
})

布尔玛 CSS 标签切换器

Bulma CSS tab switcher

javascript

ajax

bulma