title: How to switch between tabs using href?
body: <p>I've created a tabbed pane here - <a href="http://codepen.io/Saturnian/pen/iILfx" rel="noreferrer">LINK</a></p>
  
  <p>In Tab 1, I have a piece of text. When clicked, I'd like it to show the second tab. I've tried all variations of  <code>#tab2</code>, <code>#mtabs#tab2</code> , etc but nothing seems to work. </p>
  
  <p>How do I navigate it to the second tab's content? </p>
  
  <p>HTML Code:</p>
  
  <p>
      </p>
  
  <pre><code>&lt;div id="mtabs"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#tab1" rel="tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab2" rel="tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab3" rel="tab3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
          &lt;li class="active"&gt;&lt;a href="#tab4" rel="tab4"&gt;Tab 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="mtabs_content_container"&gt;
      &lt;div id="tab1" class="mtab_content"&gt;
        &lt;p&gt;&lt;a href="#mtabs_wrapper#mtabs_content_container#tab2"&gt;Take me to Tab 2&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="tab2" class="mtab_content"&gt;
          &lt;p&gt;Tab content 2&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="tab3" class="mtab_content"&gt;
          &lt;p&gt;Tab content 3&lt;/p&gt;
      &lt;/div&gt;
  &lt;div id="tab4" class="mtab_content" style="display: block;"&gt;
    &lt;p&gt;Tab content 4&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!-- Original tabs END --&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS Code:</p>
  
  <pre><code>#mtabs_wrapper {
      width: 422px;
  }
  #mtabs_container {
      border-bottom: 1px solid #ccc;
  }
  #mtabs {
      list-style: none;
      padding: 5px 0 4px 0;
      margin: 0 0 0 0px;
      /* font: 0.75em arial; */
  }
  #mtabs li {
      display: inline;
  }
  #mtabs li a {
      border: 1px solid #ccc;
      padding: 4px 6px;
      text-decoration: none;
      color:#000;
      font-family: Artifika, serif; 
      background-color: #eeeeee;
      font-size:14px;
      /*border-bottom: 1px solid #ccc;
      outline: none;*/
      border-radius: 5px 5px 5px 5px;
      -moz-border-radius: 5px 5px 5px 5px;
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
  }
  #mtabs li a:hover {
      background-color: #dddddd;
      padding: 4px 6px;
  }
  #mtabs li.active a {
      border-bottom: 1px solid #ccc;
      background-color: #fff;
      padding: 4px 6px 5px 6px;
      /*border-bottom: none;*/
  }
  #mtabs li.active a:hover {
      background-color: #eeeeee;
      padding: 4px 6px 5px 6px;
      /*border-bottom: none;*/
  }
  
  #mtabs li a.icon_accept {
      background-image: url(accept.png);
      background-position: 5px;
      background-repeat: no-repeat;
      padding-left: 24px;
  }
  #mtabs li a.icon_accept:hover {
      padding-left: 24px;
  }
  
  #mtabs_content_container {
      border: 1px solid #ccc;
      border-top: 1px solid #ccc;
      padding: 10px;
      width: 600px;
  }
  .mtab_content {
      display: none;
  }
  
  /* TAB CSS END */
  </code></pre>
  
  <p>Javascript (jQuery actually):</p>
  
  <pre><code>$(document).ready(function(){
      //  When user clicks on tab, this code will be executed
      $("#mtabs li").click(function() {
          //  First remove class "active" from currently active tab
          $("#mtabs li").removeClass('active');
  
          //  Now add class "active" to the selected/clicked tab
          $(this).addClass("active");
  
          //  Hide all tab content
          $(".mtab_content").hide();
  
          //  Here we get the href value of the selected tab
          var selected_tab = $(this).find("a").attr("href");
  
          //  Show the selected tab content
          $(selected_tab).fadeIn();
  
          //  At the end, we add return false so that the click on the link is not executed
          return false;
      });
  });
  </code></pre>