更改的標籤內容與MaterializeCSS

背景顏色

我一直在試圖改變使用MaterializeCSS標籤選項卡的內容的背景顏色 - http://materializecss.com/tabs.html 更改的標籤內容與MaterializeCSS

如果您檢查網站 - 你可以看到，默認選項卡是白色的但'測試1，測試2等'的背景顏色內容與網站其他部分的顏色相同。我想複製這個，但一直無法。每次我嘗試更改CSS時，我都會弄亂標籤本身的外觀。我希望有人能幫我正確設置CSS。以下是代碼。

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 

    <!--Import Google Icon Font--> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!--Import materialize.css--> 
    <!-- Compiled and minified CSS --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css"> 
    <!--Let browser know website is optimized for mobile--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

    </head> 
    <body> 

    <!-- Tabs --> 
    <div class="row"> 
     <div class="col s12"> 
     <ul class="tabs"> 
      <li class="tab col s3"><a class="active" href="#test1">Tab 1</a></li> 
      <li class="tab col s3"><a href="#test2">Tab 2</a></li> 
      <li class="tab col s3"><a href="#test3">Tab 3</a></li> 
      <li class="tab col s3"><a href="#test4">Tab 4</a></li> 
      <li class="tab col s3"><a href="#test5">Tab 5</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 2</div> 
     <div id="test5" class="col s12">Test 3</div> 
    </div> 

    <!-- Init Tabs --> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('ul.tabs').tabs(); 
      }); 
     </script> 


    <!--Import jQuery before materialize.js--> 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
     <!-- Compiled and minified JavaScript --> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script> 
    </body> 
    </html>

我一直在嘗試編輯所有的類，例如'test1'ID。但是這也會與標籤的底部相沖突。

在此先感謝。

來源

2017-07-18 ChartProblems

你能更清楚嗎？你想突出顯示的一個比另一個更黑暗嗎？ –

我想更改內容Div的背景顏色（ID爲test1-test5）。默認情況下，背景顏色爲白色。在網站上你可以看到背景顏色是灰色的 - 所以我知道可以改變。我只是無法改變CSS，以至於它不會影響可點擊標籤的佈局。 – ChartProblems

從我的理解，我已經更新了答案。請讓我知道它是否需要任何更新。 –

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 

 
    <!--Import Google Icon Font--> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    <!--Import materialize.css--> 
 
    <!-- Compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css"> 
 
    <!--Let browser know website is optimized for mobile--> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 

 
    </head> 
 
    <style> 
 
li:nth-child(n+1){background-color:#ccc;} 
 
#test1, #test2, #test3, #test4, #test5{background-color:pink;} 
 
    </style> 
 
    <body> 
 

 
    <!-- Tabs --> 
 
    <div class="row"> 
 
     <div class="col s12"> 
 
     <ul class="tabs"> 
 
      <li class="tab col s2"><a class="active" href="#test1">Tab 1</a></li> 
 
      <li class="tab col s2"><a href="#test2">Tab 2</a></li> 
 
      <li class="tab col s2"><a href="#test3">Tab 3</a></li> 
 
      <li class="tab col s2"><a href="#test4">Tab 4</a></li> 
 
      <li class="tab col s2"><a href="#test5">Tab 5</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 id="test5" class="col s12">Test 5</div> 
 
    </div> 
 

 
    <!-- Init Tabs --> 
 
     <script type="text/javascript"> 
 
     $(document).ready(function(){ 
 
      $('ul.tabs').tabs(); 
 
      }); 
 
     </script> 
 

 

 
    <!--Import jQuery before materialize.js--> 
 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
     <!-- Compiled and minified JavaScript --> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script> 
 
    </body> 
 
    </html>

你的意思是這樣的？首先，col值應該高達12，你已經給出了3 * 5 = 15。

來源

2017-07-18 13:46:20

謝謝你。我不想改變選項卡本身的顏色（將li標籤更改爲#ccc的方式，我正在嘗試將id的Test 1的背景顏色更改爲Test 5.但是，此處的解決方案不起作用對於我而言，我沒有看到粉紅色 – ChartProblems

在這種情況下，您可以簡單地使用＃test1 {background-color：red;}，它應該可以工作。我已將粉紅色添加到div id test1到test5，運行您使用的snipet.which瀏覽器？ –

更改的標籤內容與MaterializeCSS

回答

相關問題