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

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>
  • 写回答

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

报告相同问题？

  • Web前端主题色更换实现方式全解析（二）
    2024-01-19 14:06
    球球不吃虾的博客 基于前端框架的主题色切换
  • 记录--记一次前端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（用更少的代码来完成更多的工作）
  • CSS初学者必须掌握的14个实践小技巧
    2024-01-03 12:00
    WPHunter的博客 当您开始使用网页设计时，让一切正常工作并查看您希望它看起来如何的关键元素落在 CSS 手中。这是层叠样式表的缩写，它们允许您以任何您想要的方式设置HTML元素的样式。虽然您可以通过多种方式尝试CSS（通常是内联...
  • 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，浏览器，算法等等 详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！ 前端视频资料： 头条等...
  • 前端html布局不好处理数据的优点,前端面试整理—CSS问题
    2021-06-11 18:25
    18918258191的博客 本文来自于 闪兔网络工作室：前端面试整理—CSS问题，转载请保留链接 ;)CSS 选择器的优先级是如何计算的？重置(resetting)CSS 和 标准化(normalizing)CSS 的区别是什么？你会选择哪种方式，为什么？请阐述Float定位...
  • vue tab切换_基于Vuejs和Bulma开发的新兴开源UI组件库——Vue-Blu
    2020-11-29 12:35
    weixin_39631295的博客 Bulma是一个基于Flexbox的免费开源CSS框架，已有200,000多名开发人员使用；笔者曾经也介绍过这一款css框架，目前star数已突破38.9k，确实是一个非常受欢迎的纯css框架项目地址vue-bluhttps://github.com/chen...
  • 前端这两年的文章总结
    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
    warm-summer的博客 一、CSS 选择器的优先级是如何计算的？ 浏览器通过优先级规则，判断元素展示哪些样式。优先级通过 4 个维度指标确定，我们假定以a、b、c、d命名，分别代表以下含义： a表示是否使用内联样式（inline style）。如果...
  • 前端面试题（持续更新~~）
    2024-01-18 17:22
    深巷的猫~的博客 7.SessionStorage （1）定义 SessionStorage和LocalStorage都是在HTML5才提出来的存储方案，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据...
  • 21-30.Web前端概述
    2021-11-22 20:56
    万伏小太阳的博客 说明：本文使用的部分插图来自Jon Duckett先生的*HTML and CSS: Design and Build Websites*一书，这是一本非常棒的前端入门书，有兴趣的读者可以在亚马逊或者其他网站上找到该书的购买链接。 HTML 是用来描述网页...
  • Vue组件汇总，这些Web前端高级必会知识点你能答出来几个
    2024-04-18 10:23
    2401_84138835的博客 根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。...需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
  • 【Python入门基础】Web前端
    2020-12-21 15:02
    ZoomToday的博客 元素的额外信息（鼠标悬浮时会显示工具提示文本） tabindex：Tab键切换顺序 contenteditable：元素是否可编辑 draggable：元素是否可拖拽 块级元素 / 行级元素 字符实体（实体替换符） 使用CSS渲染页面 CSS的作用 ...
  • 前端（四）——vue.js、vue、vue2、vue3
    2023-07-07 11:43
    小猫娃来啦的博客 他在Google工作期间，积累了丰富的前端开发经验，并觉得现有的前端框架存在一些不足之处，如复杂性、学习曲线陡峭等。因此，尤雨溪决定开发一个简单、灵活且高效的框架，使开发者能够更轻松地构建用户界面。他的灵感...
  • 总结前端常用的网址
    2019-01-14 19:08
    weixin_44366185的博客 Bookmarks Bookmarks 手机收藏 收藏栏 网址大全 百度 百度翻译在线_百度搜索 框架 MUI-最接近原生APP体验的高性能前端框架 SUI Mobile 纯CSS绘制三角形（各种角度）_基础教程_脚...
  • 整理一批正在学、正在看、正在用，前端工具
    2021-02-18 10:26
    那些这个夏天的博客 整理一批正在学、正在看、正在用，前端工具 注：本文转载自掘金：https://juejin.cn/post/6911251933386768391 本文章内容为平时开发自己常用常看的一些工具、库、框架、优秀的博客技术网站。都是自己使用过的，大...
  • 前端有用的库
    2021-08-26 20:16
    yusirxiaer的博客 tailwindcss 与Tailwind CSS相关的很棒的事情 awesome-css-frameworks 很棒的CSS框架列表 awesome-css-cn CSS 资源大全中文版，内容包括：CSS预处理器、框架、CSS结构、代码风格指南、命名习惯等等 awesome-css ...
  • 没有解决我的问题, 去提问

悬赏问题

  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler