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のみのフレームワークになることですようブルマCSSは、JavaScriptの実装のための最高のコレクションを持っていません。

Javascript、jQuery、AJAXに慣れていない人は、BootstrapやMaterialize 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

あなただけの2を使用して、7つの関数を作成することやjQueryのをインポートせずにJavaScriptでブルマでちょっと短いそれを行うことができますクラスと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"; 
}

あなたはアクティブなクラスを追加し、この例では、実際にアクティブなクラスを持っていませんが合うように調整することができます！フォント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タブスイッチャー

答えて

関連する問題