title: jQuery tabs, jumping to top of page, how to stop?
body: <p>I've read the other posts on this, but I'm still unable to get may page jumping to the top when a tab is clicked. Heres the HTML</p>
  
  <pre><code>&lt;ul class="tabs-nav"&gt;
      &lt;li class="active"&gt;&lt;a href="#tab1"&gt;&lt;i class="icon-list-ul"&gt;&lt;/i&gt; Tab 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab2"&gt;&lt;i class="icon-map-marker"&gt;&lt;/i&gt; Tab 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Tabs Content --&gt;
  &lt;div class="tabs-container"&gt;
      &lt;div class="tab-content" id="tab1"&gt;Stuff&lt;/div&gt;
      &lt;div class="tab-content" id="tab2"&gt;Stuff&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the js...</p>
  
  <pre><code>(function() {
  
      var $tabsNav    = $('.tabs-nav'),
          $tabsNavLis = $tabsNav.children('li'),
          $tabContent = $('.tab-content');
  
      $tabsNav.each(function() {
          var $this = $(this);
  
          $this.next().children('.tab-content').stop(true,true).hide()
                                               .first().show();
  
          $this.children('li').first().addClass('active').stop(true,true).show();
      });
  
      $tabsNavLis.on('click', function(e) {
          var $this = $(this);
  
          $this.siblings().removeClass('active').end()
               .addClass('active');
  
          $this.parent().next().children('.tab-content').stop(true,true).hide()
                                                        .siblings( $this.find('a').attr('href') ).fadeIn();
  
          e.preventDefault();
  
      });
  
  })();
  </code></pre>
  
  <p>Now I've tried adding </p>
  
  <pre><code>onclick="return false;"
  </code></pre>
  
  <p>to the tab href in the html, but that is doing nothing. Any help very much appreciated! Thanks!</p>