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

报告相同问题?

悬赏问题

  • ¥15 铜与钢双金属板叠加在一起每种材料300mm长,18mm宽,4mm厚一端固定并加热至80℃,当加热端温度保持不变时另一端的稳态温度。ansys
  • ¥15 django5安装失败
  • ¥15 Java与Hbase相关问题
  • ¥15 后缀 crn 游戏文件提取资源
  • ¥15 ANSYS分析简单钎焊问题
  • ¥20 bash代码推送不上去 git fetch origin master #失败了
  • ¥15 LOL外服加入了反作弊系统,现在游戏录像rofl文件离线都无法打开
  • ¥15 在centos7安装conda
  • ¥15 c#调用yolo3 dll文件获取的数据对不上
  • ¥20 WPF 如何实现多语言,label 和cs(live Charts)中是否都能翻译