Изменение цвета фона содержимого вкладки с помощью MaterializeCSS

Я пытался изменить цвет фона содержимого вкладок с помощью вкладок MaterializeCSS - http://materializecss.com/tabs.html

Если вы посмотрите на веб-сайт, вы увидите, что вкладки по умолчанию белые, но цвет фона «Тест 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». Но это также будет конфликтовать с нижней частью вкладок.

Заранее спасибо.


css materialize
person ChartProblems    schedule 18.07.2017    source источник
comment
Можете ли вы быть более ясным, пожалуйста? Вы хотите, чтобы выделенный был темнее другого?   -  person Hema Nandagopal    schedule 18.07.2017
comment
Я хочу изменить цвет фона содержимого Div (с идентификатором 'test1-test5). По умолчанию цвет фона белый. На сайте вы можете видеть, что цвет фона серый, поэтому я знаю, что его можно изменить. Я просто не смог изменить CSS таким образом, чтобы он не мешал макету интерактивных вкладок.   -  person ChartProblems    schedule 18.07.2017
comment
Из того, что я понял, я обновил ответ. Пожалуйста, дайте мне знать, если он нуждается в каком-либо обновлении.   -  person Hema Nandagopal    schedule 18.07.2017

Ответы (1)


arrow_upward
0
arrow_downward 

<!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>

Вы имели в виду что-то вроде этого? Прежде всего, значение столбца должно быть до 12, которое вы указали, имеет 3 * 5 = 15.

person Hema Nandagopal    schedule 18.07.2017
comment
Спасибо тебе за это. Я не пытаюсь изменить цвет самих вкладок (как вы меняете теги li на #ccc. Я именно пытаюсь изменить цвет фона для идентификатора Test 1 на Test 5. Однако решение здесь не работает для меня я не вижу розового цвета. - person ChartProblems; 18.07.2017
comment
В этом случае вы можете просто использовать #test1{background-color:red;}, это должно сработать. Я добавил розовый цвет в div id от test1 до test5, запустите фрагмент. Какой браузер вы используете? - person Hema Nandagopal; 18.07.2017