Bulma CSS Tab Switcher

-4

Wie man einen Ajax-ähnlichen Tab Switcher im Bulma CSS Framework macht? Wie man es leicht macht? Oder welchen Rahmen sollte ich verwenden, um diese Aufgabe zu lösen?Bulma CSS Tab Switcher

Einige Text Bypass Github Fehler Einige Text Github Fehler Einige Text zu umgehen Github Fehler Einige Text zu umgehen Github Fehler

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

zu umgehen

Quelle

2017-07-03 Yura

-1

Bulma CSS hat nicht die beste Sammlung für JavaScript-Implementierung, da seine Motivation ist nur Rahmen ein CSS zu sein.

Wenn Sie nicht sehr vertraut sind mit Javascript, jQuery, AJAX, würde ich vorschlagen, dass Sie andere Frameworks wie Bootstrap oder Materialize CSS übernehmen.

Ein einfaches Beispiel zu erreichen, um die Funktionalität die Sie suchen: -

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

Quelle

2017-09-15 20:13:25 zuif

Wenn ich Ihre Frage richtig verstanden habe, möchten Sie immer auf der gleichen Seite bleiben, während Sie die Registerkarten wechseln, aber auf jeder "Registerkarte" unterschiedliche Inhalte haben. Sehen Sie sich bitte an, wie ich es im folgenden Abschnitt gemacht habe. Es gibt wahrscheinlich mehr Möglichkeiten, es aber zu tun ..

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

Quelle

2017-07-10 11:06:09 flosommerfeld

Sie können es mit Javascript, ein bisschen kürzer in Bulma tun, ohne 7 Funktionen erstellen zu müssen oder jQuery importieren, mit nur 2 Klassen und 1-Funktion, siehe unten,

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

Sie können eine aktive Klasse hinzufügen und anpassen es dieses Beispiel eine aktive Klasse hat passen, obwohl eigentlich nicht !. Verwendet Font Awesome.

Beispielcode auf GitHub bei minimallinux

Quelle

2018-02-03 15:38:44 minimallinux

Eine bessere Lösung wäre eine einzige Methode zu erstellen, die alle Ihre Tabs umgehen kann, nicht eine Methode für jeden, würden Sie ids um verwenden müssen, um sie zu unterscheiden, die folgende Art und Weise:

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

Quelle

2018-02-23 19:31:19

Bulma CSS Tab Switcher

Antwort

Verwandte Themen