Bulma CSS標籤切換器

-4

如何在Bulma CSS框架中製作類似Ajax的標籤切換器？如何以簡單的方式做到這一點？或者我應該使用什麼框架來解決這個任務？Bulma CSS標籤切換器

一些文字旁路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>

來源

2017-07-03 Yura

-1

布爾瑪CSS不具備Javascript實現最佳的集合，其動機是爲了成爲一個CSS唯一框架。

如果您對Javascript，jQuery，AJAX不太熟悉，我會建議您採用其他框架，如Bootstrap或Materialise CSS。

一個簡單的例子，以達到你所尋找的功能： -

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

來源

2017-09-15 20:13:25 zuif

如果我正確理解你的問題，你總是希望在切換選項卡時保持在同一頁面中，但每個「選項卡頁面」上都有不同的內容。請看下面的代碼片段我是如何做到的。可能有更多的方式來做到這一點，但..

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <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" /> 
 

 
    <style> 
 
    .hidden { 
 
     display: none; 
 
    } 
 
    </style> 
 
</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="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="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="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="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("hidden"); 
 
    } 
 

 
    function switchToAdaptiveDesign() { 
 
     removeActive(); 
 
     hideAll(); 
 
     $("#adaptivedesign-tab").addClass("is-active"); 
 
     $("#adaptivedesign-tab-content").removeClass("hidden"); 
 
    } 
 

 
    function switchToJquery() { 
 
     removeActive(); 
 
     hideAll(); 
 
     $("#jquery-tab").addClass("is-active"); 
 
     $("#jquery-tab-content").removeClass("hidden"); 
 
    } 
 

 
    function switchToAjax() { 
 
     removeActive(); 
 
     hideAll(); 
 
     $("#ajax-tab").addClass("is-active"); 
 
     $("#ajax-tab-content").removeClass("hidden"); 
 
    } 
 

 
    function switchToAngularJS() { 
 
     removeActive(); 
 
     hideAll(); 
 
     $("#angularjs-tab").addClass("is-active"); 
 
     $("#angularjs-tab-content").removeClass("hidden"); 
 
    } 
 

 
    function removeActive() { 
 
     $("li").each(function() { 
 
     $(this).removeClass("is-active"); 
 
     }); 
 
    } 
 

 
    function hideAll(){ 
 
     $("#all-tab-content").addClass("hidden"); 
 
     $("#adaptivedesign-tab-content").addClass("hidden"); 
 
     $("#jquery-tab-content").addClass("hidden"); 
 
     $("#ajax-tab-content").addClass("hidden"); 
 
     $("#angularjs-tab-content").addClass("hidden"); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-07-10 11:06:09 flosommerfeld

你可以做布爾瑪有點短用JavaScript，而無需創建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。在minimallinux

來源

2018-02-03 15:38:44 minimallinux

更好的解決方案在GitHub上

示例代碼將創建一個可以處理所有的標籤，而不是一個方法爲每一個方法，你需要爲了區分他們使用的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; }

來源

2018-02-23 19:31:19

Bulma CSS標籤切換器

回答

相關問題