Mengubah warna latar belakang konten tab dengan MaterializeCSS

Saya telah mencoba mengubah warna latar belakang konten tab menggunakan tab MaterializeCSS - http://materializecss.com/tabs.html

Jika Anda memeriksa situs web - Anda dapat melihat bahwa tab default berwarna putih tetapi warna latar belakang 'Tes 1, Test2, dll.' kontennya berwarna keabu-abuan yang sama dengan situs web lainnya. Saya ingin menduplikasi ini tetapi tidak bisa. Setiap kali saya mencoba mengubah CSS, entah bagaimana saya juga mengacaukan tampilan tab itu sendiri. Saya berharap seseorang dapat membantu saya mengatur CSS dengan benar. Di bawah ini adalah kodenya.

<!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="/id#test1">Tab 1</a></li>
          <li class="tab col s3"><a href="/id#test2">Tab 2</a></li>
          <li class="tab col s3"><a href="/id#test3">Tab 3</a></li>
          <li class="tab col s3"><a href="/id#test4">Tab 4</a></li>
          <li class="tab col s3"><a href="/id#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>

Saya telah mencoba mengedit semua kelas dan misalnya ID 'test1'. Namun ini juga akan bertentangan dengan bagian bawah tab.

Terima kasih sebelumnya.


css materialize
person ChartProblems    schedule 18.07.2017    source sumber
comment
Bisakah Anda lebih jelasnya? Apakah Anda ingin yang disorot lebih gelap dari yang lain?   -  person Hema Nandagopal    schedule 18.07.2017
comment
Saya ingin mengubah warna latar belakang Div konten (dengan ID 'test1-test5). Secara default warna backgroundnya putih. Di situs web Anda dapat melihat bahwa warna latar belakangnya abu-abu - jadi saya tahu itu mungkin untuk diubah. Hanya saja saya belum bisa mengubah CSSnya sedemikian rupa sehingga tidak mengganggu tata letak tab yang dapat diklik.   -  person ChartProblems    schedule 18.07.2017
comment
dari Apa yang saya pahami, saya telah memperbarui jawabannya. Tolong beri tahu saya jika perlu pembaruan apa pun.   -  person Hema Nandagopal    schedule 18.07.2017

Jawaban (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="/id#test1">Tab 1</a></li>
          <li class="tab col s2"><a href="/id#test2">Tab 2</a></li>
          <li class="tab col s2"><a href="/id#test3">Tab 3</a></li>
          <li class="tab col s2"><a href="/id#test4">Tab 4</a></li>
          <li class="tab col s2"><a href="/id#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>

Maksudmu sesuatu seperti ini? Pertama-tama nilai col harus beberapa hingga 12 yang Anda berikan memiliki 3 *5 =15.

person Hema Nandagopal    schedule 18.07.2017
comment
Terima kasih untuk ini. Saya tidak mencoba mengubah warna tab itu sendiri (cara Anda mengubah tag li menjadi #ccc. Saya sebenarnya mencoba mengubah warna latar belakang untuk id Tes 1 ke Tes 5. Namun solusi di sini tidak berhasil bagi saya, saya tidak melihat warna merah jambu. - person ChartProblems; 18.07.2017
comment
Dalam hal ini Anda cukup menggunakan #test1{background-color:red;}, ini akan berhasil. Saya telah menambahkan warna merah muda ke id div test1 ke test5, jalankan snipet. Browser mana yang Anda gunakan? - person Hema Nandagopal; 18.07.2017