title: JavaScript navigation menu multiple onclick
body: <p>I am getting in touch with javascript and just having problem with multiple onClick attribute. I already have some code but it seems to be easier and neater way to solve an issue.</p>
  
  <p>I would like to have navigation menu which hyperlink background gets a color onClick and blog div changes its content. Also if you click on another hyperlink it changes the background color and other hyperlink is reset to its original background color</p>
  
  <p>here's my code so far. Seems to be working but not sure if this is a way</p>
  
  <p>--
  HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="navigation_bar"&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li class="red" id="1"&gt;&lt;a href="#" onclick="showDiv1(this)"&gt;NavMenu1&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="red" id="2"&gt;&lt;a href="#" onclick="showDiv2(this)"&gt;NavMenu2&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="red" id="3"&gt;&lt;a href="#" onclick="showDiv3(this)"&gt;NavMenu3&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="red" id="4"&gt;&lt;a href="#" onclick="showDiv4(this)"&gt;NavMenu4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div id="blog"&gt;
          &lt;div id="category_1" style="display: none"&gt;
              &lt;img src="#" alt="xx" /&gt;
              &lt;article&gt;
                  &lt;p&gt;Content of first navigation bar&lt;/p&gt;
              &lt;/article&gt;
          &lt;/div&gt;
          &lt;div id="category_2" style="display: none;"&gt;
              &lt;article&gt;
                  &lt;p&gt;Content of second navigation button&lt;/p&gt;
              &lt;/article&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>javascript</p>
  
  <pre><code>function showDiv1(obj) {
      var elchosen = document.getElementById('category_1');
      elchosen.setAttribute('style', 'display:block;');
  
      var spanID = obj.parentNode.id;
      var newNode = document.getElementById(spanID);
  
      var menus = document.getElementsByClassName("rood");
      for (var i = menus.length - 1; i &gt;= 0; i--) {
          var elem = document.getElementById(menus[i].id);
          elem.style.backgroundColor = "transparent";
  
      }
  
      newNode.style.backgroundColor = "red";
  }
  
  function showDiv2(obj) {
  
      var elchosen = document.getElementById('category_1');
      elchosen.setAttribute('style', 'display:none;');
  
      var elchosen = document.getElementById('category_2');
      elchosen.setAttribute('style', 'display:block;');
  
      var spanID = obj.parentNode.id;
      var newNode = document.getElementById(spanID);
  
      var menus = document.getElementsByClassName("red");
      for (var i = menus.length - 1; i &gt;= 0; i--) {
          var elem = document.getElementById(menus[i].id);
          elem.style.backgroundColor = "transparent";
  
      }
  
      newNode.style.backgroundColor = "red";
  }
  </code></pre>
  
  <p>Just wondering if there is simple way to go by using something like category_n and showDiv(n) etc. just not to write same code for each operation as I have above. </p>
  
  <p>I really appreciate any advice as am just at the beginning of my journey to get deep understanding of javascript.</p>
  
  <p>Thanks so much</p>