title: My TABS in HTML doesn't work. It wont redirect me to the <div id="example">
body: <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Anime World&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body {font-family: Arial, sans-serif;}
  
          &lt;!--Tab CSS design--&gt;
          div.tab {
              overflow: hidden;
              border: 1px solid;
              background-color: #f1f1f1;
          }
  
          div.tab.button {
              background-color: inherit;
              float: left;
              border: none;
              outline: none;
              cursor: pointer;
              padding: 15px 17px;
              transition: 0.3s;
              font-size: 17px;
          }
  
          div.tab.button:hover {
              background-color: #ddd;
          }
  
          div.tab.button.active {
              background-color: #ccc;
          }
  
          .tabcontent {
              display: none;
              padding: 12px 23px;
              border: 1px solid #ccc;
              border-top: none;
          }
  </code></pre>
  
  <p>This is my CSS design for TAB, I changed it a little bit from w3schools example.</p>
  
  <pre><code>&lt;body style="background-color:darkgray"&gt;
      &lt;div class="tab" action="tabcontent"&gt;
          &lt;button class="tablinks" onclick="openPage(event, 'Home')"&gt;Home&lt;/button&gt;
          &lt;button class="tablinks" onclick="openPage(event, 'List')"&gt;List&lt;/button&gt;
          &lt;button class="tablinks" onclick="openPage(event, 'Videos')"&gt;Videos&lt;/button&gt;
          &lt;button class="tablinks" onclick="openPage(event, 'Manga')"&gt;Manga&lt;/button&gt;
          &lt;button class="tablinks" onclick="openPage(event, 'About')"&gt;About&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          function openPage(evt, pageName) {
              var i, tabcontent, tablinks;
              tabcontent = document.getElementsByClassName("tabcontent");
              for (i = 0; i &lt; tabcontent.length; i++) {
                  tabcontent[i]style.display = "none";
              }
              tablinks = document.getElementsByClassName("tablinks");
              for (i = 0; i &lt; tablinks.length; i++) {
                  tablinks[i].className = tablinks[i].className.replace(" active", "");
              }
              document.getElementById(pageName).style.display = " block";
              evt.currentTarget.className += " active";
          }
      &lt;/script&gt;
  
      &lt;div id="List" class="tabcontent"&gt;
          &lt;h1&gt;LIST OF ANIMES&lt;/h1&gt;
          &lt;br/&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;th&gt;Anime&lt;/th&gt;
                  &lt;th&gt;Rating&lt;/th&gt;
                  &lt;th&gt;Owner&lt;/th&gt;
              &lt;/tr&gt;
  </code></pre>
  
  <p>And this is the TAB code in Javascript, I worked it by the tutorial from w3schools, I just changed some code that I noticed they should.</p>
  
  <p>So the problem here is, this doesn't work. The CSS design above don't want to show up and it's showing simple HTML buttons without any design and same with the Javascript code, when I click on "List" button it won't show me the <code>&lt;table&gt;</code> I made in <code>&lt;div id="List" class="tabcontent"&gt;</code>. Have in mind that I am some kind of begginer of this, so I am doing everything by tutorials and slowly learning this. Thank you for your help.</p>