2016-12-31 72 views

回答

2

圖片: Active tab和在CSS用於上文2個圖像效果 Tab2 on hover

代碼更改:

 .tabs .tab a{ 
      color:#000; 
     } /*Black color to the text*/ 

     .tabs .tab a:hover { 
      background-color:#eee; 
      color:#000; 
     } /*Text color on hover*/ 

     .tabs .tab a.active { 
      background-color:#888; 
      color:#000; 
     } /*Background and text color when a tab is active*/ 

     .tabs .indicator { 
      background-color:#000; 
     } /*Color of underline*/ 
+0

希望這可以幫助脂肪酶尋找相同的問題:) –

-1

它很容易在物化中應用預定義的類。

只是參考頁:http://materializecss.com/color.html

在這裏,我已經應用類蒂爾減輕-2,但也有從中你可以選擇的歸類不同的組合。此外,您可以編寫自己的自定義類並應用它。

HTML:

<div class="row"> 
    <div class="col s12"> 
    <ul class="tabs teal lighten-2"> 
     <li class="tab col s3"><a href="#test1">Test 1</a></li> 
     <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li> 
     <li class="tab col s3"><a href="#test3">Test 3</a></li> 
    </ul> 
    </div> 
    <div id="test1" class="col s12">Test 1</div> 
    <div id="test2" class="col s12">Test 2</div> 
    <div id="test3" class="col s12">Test 3</div> 
    <div id="test4" class="col s12">Test 4</div> 
</div> 

的jsfiddle:http://jsfiddle.net/nikdtu/doska9qe/

+0

@KruthikaCS:高興地幫忙! :) –

+1

根本不工作! –

+0

@Adarsh:究竟是什麼,你檢查了小提琴http://jsfiddle.net/nikdtu/doska9qe/? –

相關問題