title: How to toggle div content when clicking on different navigation links?
body: <p>I want to have my whole website as one page.</p>
  <p>When clicking on different links in the navigation bar, the content should cross-fade from the old to the new one.</p>
  <p>Example: I am on index.html#home and click on About. This should cross-fade between the divs #home and #about.</p>
  <p>Using W3CSS and jQuery I managed to hide the content like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function hideContent() {
          $(".content-active").addClass("w3-hide", "content-inactive");
          $(".content-active").removeClass("w3-show", "content-active");
        };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="#home" class="w3-bar-item w3-hide-small" style="width:16.5%"&gt;Home&lt;/a&gt;
  &lt;a href="#about" class="w3-bar-item w3-hide-small" style="width:16.5%" onclick="hideContent()"&gt;About&lt;/a&gt;
  &lt;div id="home" class="w3-container w3-green w3-show content-active" style="height:50px"&gt;&lt;/div&gt;
  &lt;div id="about" class="w3-container w3-red w3-hide content-inactive" style="height:50px"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am not able to show the new content though. I wanted to add an onclick function to the navigation link and then extract the href-value to again change the class names for the div that has the ID of the href-value.</p>
  <p>But doing this on <code>&lt;a href=&quot;#&quot; onclick=&quot;showContent()&gt;&lt;/a&gt;</code> returns undefined:</p>
  <pre><code>function showContent() {
      var hrefValue = $(this).attr(&quot;href&quot;);
      alert(hrefValue);
    }
  </code></pre>
  <p>I guess <code>this</code> is not in the proper scope of <code>&lt;a&gt;</code> here. Am I assuming correctly?</p>
  <p>What would be an easy way to show the content otherwise?</p>