title: changing a tab content using html and javascript
body: <p>i have this following code for four tabs </p>
  
  <pre><code> &lt;div class="row"&gt;
  &lt;div class="col s2"&gt;&lt;/div&gt;
  &lt;div class="col s10"&gt;
    &lt;ul class="tabs" style="background-image:url(images/wallpaper/water.jpg); border-radius:10px; "&gt;
      &lt;li class="tab col s3"&gt;&lt;a class="active" href="#test1" style="font-family:Trebuchet MS;  font-size: 20px; "&gt;Bienvenue&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tab col s3"&gt;&lt;a  href="#test2" style="font-family:Trebuchet MS;  font-size: 20px; "&gt;Gestion des categories&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tab col s3 "&gt;&lt;a href="#test3" style="font-family:Trebuchet MS; font-size: 20px;  "&gt;Demandes d'ajoute&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tab col s3"&gt;&lt;a href="#test4" style="font-family:Trebuchet MS; font-size: 20px;  "&gt;Plus&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the content of this tabs ... </p>
  
  <pre><code> &lt;div id="test1" class="col s12"&gt;&lt;div class="image"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div id="test2" class="col s12"&gt;TAB2 
  &lt;button&gt; &lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="test3" class="col s12"&gt;TAB3&lt;/div&gt;
  &lt;div id="test4" class="col s12"&gt;TAB4&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>i want to change the content of TAB 2 by cliquing on the button .what can i do ?</p>