Question

我使用materializecss。我有两个问题第一：如何使用＆＃34;激活＆＃34;标记标签（就好像被点击一样）类？如果我打开标签（在＆＃34;活动＆＃34;标签后面），我看不到，此刻的标签（包裹中）打开了。（我使用两行标签）第二：如何标记选项卡的文本（好像是悬停在两行中）提前感谢您的帮助。

Answer 1

请查看文档： http://materializecss.com/tabs.html

您可以使用callback-Function onShow 因此，当显示标签时，您可以执行任何您想要的操作^^

你的Tab-Trigger（也许是你的a-tag）获得＆＃34; active＆＃34;激活后自动分类

Answer 2

生成＆amp;使用materialize Css嵌套浏览标签你可以做类似的事情：

<ul id="tabs-swipe-demo" class="tabs">
    <li class="tab col s3"><a href="#test-swipe-1">Test 1</a></li>
    <li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
    <li class="tab col s3"><a href="#test-swipe-3">Test 3</a></li>
</ul>
<div id="test-swipe-1" class="col s12 blue">
Test 1 <!-- whatever inside first tab -->
<!-- you can nest another set of tab inside like so : -->
    <ul id="tabs-swipe-demo" class="tabs">
        <li class="tab col s3"><a href="#test-swipe-4">Test 4</a></li>
        <li class="tab col s3"><a class="active" href="#test-swipe-5">Test 5</a></li>
        <li class="tab col s3"><a href="#test-swipe-6">Test 6</a></li>
    </ul>
    <div id="test-swipe-4" class="col s12 blue">
        Test 4 <!-- whatever inside first tab -->        
    </div>
    <div id="test-swipe-5" class="col s12 red">
        Test 5 <!-- whatever inside secont tab -->
    </div>
    <div id="test-swipe-6" class="col s12 green">
        Test 6 <!-- whatever inside third tab -->
    </div>
</div>

<div id="test-swipe-2" class="col s12 red">
    Test 2 <!-- whatever inside secont tab -->
</div>

<div id="test-swipe-3" class="col s12 green">
    Test 3 <!-- whatever inside third tab -->
</div>

在悬停或活动状态下更改标签字体颜色和背景颜色，您可以将其放入css：

 <style>
 /*when hover*/
.tabs .tab a:hover{
    background-color:/* put some background color*/;
    color:/* put some font color*/;
}
/*when active*/
.tabs .tab a.active{
    background-color:/* put some background color*/;
    color:/* put some font color*/;
}
</style>

Materializecss选项卡

2 个答案: