Using tabs to navigate to different html files (HTML, JavaScript)
<p>this is my first time doing something like this.</p>

<p>Let's say in my HTML file I have something like</p>

<pre><code>&lt;div class="main_tabs"&gt;
    &lt;ul class="tabs"&gt;
       &lt;li id="home_tab"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
       &lt;li id="other_tab"&gt;&lt;a href="other.html"&gt;Other&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
&lt;/div&gt;
</code></pre>

<p>Then in my JavaScript file I have something like </p>

<pre><code>jQuery(document).ready(function() {
   jQuery('.main_tabs .tabs a').on('click', function(e)  {
       e.preventDefault();
       switch(this.id){
           case "home_tab":
           window.location.href = "index.html";
           break;
           case "other_tab":
           window.location.href = "other.html";
           break;
       }
   });
});
</code></pre>

<p>When I click the tabs, nothing happens. I tried a bunch of different stuff, but I couldn't get it to work. Could anyone help me (by the way, I need to keep the preventDefault to do some other stuff in the function, so I need to manually do the page changing)? </p>