Bulma CSS标签切换器

时间：2017-07-03 18:16:02

标签： javascript ajax bulma

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

5 个答案:

答案 0 :(得分：6)

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

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

答案 1 :(得分：2)

你可以使用javascript在Bulma中做得更短，而不必创建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

的示例代码

答案 2 :(得分：0)

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

答案 3 :(得分：0)

使用香草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')
    })
  })
})

答案 4 :(得分：-2)

Bulma CSS没有Javascript实现的最佳集合，因为它的动机是成为仅CSS的框架。

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

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

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

相关问题
最新问题