title: Using Javascript and tabs to change page content
body: <p>I am trying to create some sort of script that will change the certain text when I go to a new tab. I am a noobie to Javascript and okayish with HTML and CSS.</p>
  
  <p>Here is the link to my work so far:
  <a href="https://jsfiddle.net/gbjwn08y/" rel="nofollow noreferrer">https://jsfiddle.net/gbjwn08y/</a></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {font-family: "Lato", sans-serif;}
  
  .tablink {
      background-color: #555;
      color: white;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      font-size: 17px;
      width: 25%;
  }
  
  .tablink:hover {
      background-color: #777;
  }
  
  /* Style the tab content */
  .tabcontent {
      color: white;
      display: none;
      padding: 50px;
      text-align: center;
  }
  
  #London {background-color:red;}
  #Paris {background-color:green;}
  #Tokyo {background-color:blue;}
  #Oslo {background-color:orange;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="London" class="tabcontent"&gt;
    &lt;h3&gt;London&lt;/h3&gt;
    &lt;p&gt;London is the capital city of England.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="Paris" class="tabcontent"&gt;
    &lt;h3&gt;Paris&lt;/h3&gt;
    &lt;p&gt;Paris is the capital of France.&lt;/p&gt; 
  &lt;/div&gt;
  
  &lt;div id="Tokyo" class="tabcontent"&gt;
    &lt;h3&gt;Tokyo&lt;/h3&gt;
    &lt;p&gt;Tokyo is the capital of Japan.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="Oslo" class="tabcontent"&gt;
    &lt;h3&gt;Oslo&lt;/h3&gt;
    &lt;p&gt;Oslo is the capital of Norway.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen"&gt;London&lt;/button&gt;
  &lt;button class="tablink" onclick="openCity('Paris', this, 'green')"&gt;Paris&lt;/button&gt;
  &lt;button class="tablink" onclick="openCity('Tokyo', this, 'blue')"&gt;Tokyo&lt;/button&gt;
  &lt;button class="tablink" onclick="openCity('Oslo', this, 'orange')"&gt;Oslo&lt;/button&gt;
  &lt;p&gt;
  This text right here
  &lt;/p&gt;
  &lt;script&gt;
  function openCity(cityName,elmnt,color) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i &lt; tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablink");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].style.backgroundColor = "";
      }
      document.getElementById(cityName).style.display = "block";
      elmnt.style.backgroundColor = color;
  
  }
  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>So as you can see, I have the tabs working with the text. I need the "This text right here" to change depending on which tab is clicked.
  I am also going to make a preset font using for "This text right here".</p>
  
  <p>Any help would be greatly appreciated</p>