title: The h1 tag does not change via jquery .html()
body: <p>Im pretty novice at jquery. I have a navbar and im trying to change my  tag based on what i have selected. </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>$(document).ready(function () {
   $('a').click(function (){
   the = $(this).html();
   linkvalue = $(this).attr('data-link');
   $('#whatItIs').html(the); 
   console.log(the);
   console.log(linkvalue);
   
  
   switch(the) {
       case "Steel Products":
        { 
         window.location.href = linkvalue;
            break;
        }
       case "Steel Doors":
           { 
            
            window.location.href = linkvalue;    
            break;
        }
       case "Digital Safes":
        {
            
            window.location.href = linkvalue;
            break;
        }
       case "Security Equipment":
        {
      
            window.location.href = linkvalue;
            break;
        } 
       case "Storage Solutions":
        {
         
            window.location.href = linkvalue;
            break;
        }
       case "Steel Furniture":
        {
            
            window.location.href = linkvalue;
            break;       
           }         
       default:
       {
           console.log("Not Found");
           //window.location.href = "404.html";
       }
   }
   });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;li class="dropdown" class="active"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Manufactured Products &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;
                                  &lt;a data-link="securityEquipment.html"&gt;Steel Products&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a data-link="securityEquipment.html"&gt;Steel Doors&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li &gt;
                                  &lt;a data-link="securityEquipment.html"&gt;Digital Safes&lt;/a&gt;
                              &lt;/li &gt;
                              &lt;li&gt;
                                  &lt;a data-link="securityEquipment.html"&gt;Security Equipment&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li &gt;
                                  &lt;a data-link="securityEquipment.html"&gt;Storage Solutions&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt; 
                                  &lt;a data-link ="securityEquipment.html"&gt;Steel Furniture&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
  
  &lt;h1 class="page-header" id="whatItIs"&gt;
                  Untitled
  &lt;!--                     &lt;small&gt;Subheading&lt;/small&gt;
   --&gt;                &lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that the h1 changes for only a second and then changes back to the original  i have set it to.
  This seems pretty simple. i dont know what i am doing wrong </p>