weixin_33713503 2017-07-03 18:16 采纳率: 0%

Bulma CSS标签切换器

How to make ajax-like tab switcher in Bulma CSS framework? How to make it in easy way? Or what framework should I use to solve this task?

Some text to bypass github error Some text to bypass github error Some text to bypass github error Some text to bypass github error

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

</div>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

5条回答默认最新

weixin_33730836 2017-07-10 11:06

关注

If I correctly understood your question you always want to stay on the same page while switching the tabs but have different contents on each "tab page". Please take a look at how I did it in the snippet below. There are probably more ways to do it though...

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

</div>

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
weixin_33744141 2017-09-15 20:13
关注
Bulma CSS does not have the best collection for Javascript implementation, as its motivation is to be a CSS only framework.

If you are not much familiar with Javascript, jQuery, AJAX, I would suggest you adopt other frameworks like Bootstrap or Materialize CSS.

A simple example to achieve the functionality you are looking for:-

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

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

weixin_33744854 2018-02-03 15:38

关注

You can do it a bit shorter in Bulma with javascript without having to create 7 functions or importing jQuery, using just 2 classes and 1 function, see below,

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

You can add an active class and adjust it to suit although this example doesn't actually have an active class!. Uses Font Awesome.

Sample code on GitHub at minimallinux

weixin_33701251 2018-02-23 19:31

关注

A better solution would be to create a single method that can handle all of your tabs, not one method for each, you would need to use ids in order to differentiate them, the following way:

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

lrony* 2019-03-14 19:28

关注

A slightly simplified take on Sebastian Delgado's solution using 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')
    })
  })
})

报告相同问题？

关注问题

样式冲突太多，记一次前端CSS升级
2023-02-25 19:41

前端开发小司机的博客没有使用css in js 是因为当前项目没有主题切换和动态样式这样场景，此外css in js 会让一个组件文件变得非常冗长，尤其是目前我的工作特别多复杂图表的封装，仅jsx部分代码行数已经非常长，再引入CSS代码容易变得...
记录--记一次前端CSS升级
2022-12-12 18:17

林恒smileZAZ的博客目前平台前端使用的是原生CSS+BEM命名，在多人协作的模式下，容易出现样式冲突。为了减少这一类的问题，提升研效，我调研了业界上主流的7种CSS解决方案，并将最终升级方案落地到了工程中。样式冲突的原因目前遇到...
Day 21-30 :Web前端概述
2022-10-26 10:46

Sumarua的博客说明：本文使用的部分插图来自先生的**一书，这是一本非常棒的前端入门书，有兴趣的读者可以在亚马逊或者其他...CSS的作用CSS的工作原理规则、属性和值常用选择器Write Less Do More（用更少的代码来完成更多的工作）
前端html布局不好处理数据的优点,前端面试整理—CSS问题
2021-06-11 18:25

18918258191的博客本文来自于闪兔网络工作室：前端面试整理—CSS问题，转载请保留链接 ;)CSS 选择器的优先级是如何计算的？重置(resetting)CSS 和标准化(normalizing)CSS 的区别是什么？你会选择哪种方式，为什么？请阐述Float定位...
web前端开发培训班，CSS块元素
2021-07-23 11:22

程序员莫晓娜的博客针对Web开发人员，Koel采用了一些更现代的Web技术-CSS网格，音频和拖放API等来完成其工作。 Vue Argon Dashboard 现场演示： https://demos.creative-tim.com/vue-argon-dashboard/?ref=devto 地址： ...
web前端开发职业，HTML常用的五种标签
2021-07-23 12:21

web前端工程师一米的博客知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！前端视频资料：头条等...
前端这两年的文章总结
2022-06-16 23:46

lio_zero的博客这几天整理的一下过往的文章...现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。以下整理一份分类清单（将跳转至 Github）：因为时间有限，这里只整理了一部分。其他文章会陆续整理….........
前端组件库
2022-08-12 10:37

爬坑的小白的博客前端组件库
Web前端概述
2021-06-01 21:40

Alocus_的博客 Web前端概述说明：本文使用的部分插图来自Jon Duckett先生的*[HTML and CSS: Design and Build Websites]...
前端知识总结-CSS篇
2020-03-28 09:47

hui_life的博客一、CSS 选择器的优先级是如何计算的？浏览器通过优先级规则，判断元素展示哪些样式。优先级通过 4 个维度指标确定，我们假定以a、b、c、d命名，分别代表以下含义： a表示是否使用内联样式（inline style）。如果...
没有解决我的问题, 去提问

悬赏问题

¥15 matlab处理脑电数据悬赏（时序图+预处理+频谱图）
¥100 r语言多元回归模型怎么看表达式
¥15 PMM 9010/30P
¥15 pom文件依赖管理，未找到依赖
¥15 现在后端返回给我一堆下载地址，都是一个视频切片后的，如何在uniapp安卓环境下将这些分片的视频下周并且合并成原始视频并下载到本地。
¥15 Unity导出2D项目运行时图片变成马赛克
¥15 关于communitytoolkit.mvvm的生成器得到的代码看起来没有被使用的问题
¥15 matlab中此类型的变量不支持使用点进行索引
¥15 咨询第六届工业互联网数据创新大赛原始数据
¥15 Pycharm无法自动补全，识别第三方库函数接收的参数！

Bulma CSS标签切换器

5条回答 默认 最新

悬赏问题

5条回答默认最新