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标签切换器

回答

相关问题