更改的标签内容与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

回答

相关问题