title: Multiple Tabs In One Page Using Jquery Css
body: <p>i have two problem with this jquery method :</p>
  
  <p>1- in css hover and active not change link color ! <code>Gallery</code> or <code>Submit</code> </p>
  
  <p>2- after click in tab3 or tab4 ( id 3- id 4 ) hidden tabcontent for id 1. </p>
  
  <pre><code>&lt;div&gt;&lt;ul class="tabs"&gt;
      &lt;li&gt;&lt;a href="#tab1"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab2"&gt;Submit&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="tab_container"&gt;
          &lt;div id="tab1" class="tab_content"&gt;
              &lt;!--Content--&gt;
          &lt;/div&gt;
          &lt;div id="tab2" class="tab_content"&gt;
              &lt;!--Content--&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;/div&gt;
  &lt;div&gt;
      &lt;ul class="tabs"&gt;
          &lt;li&gt;&lt;a href="#tab3"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab4"&gt;Submit&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="tab_container"&gt;
          &lt;div id="tab3" class="tab_content"&gt;
              &lt;!--Content--&gt;
          &lt;/div&gt;
          &lt;div id="tab4" class="tab_content"&gt;
              &lt;!--Content--&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  $(document).ready(function() {
  
      //When page loads...
      $(".tab_content").hide(); //Hide all content
      $("ul.tabs li:first").addClass("active").show(); //Activate first tab
      $(".tab_content:first").show(); //Show first tab content
      //On Click Event
      $("ul.tabs li").click(function() {
  
          $("ul.tabs li").removeClass("active"); //Remove any "active" class
          $(this).addClass("active"); //Add "active" class to selected tab
          $(".tab_content").hide(); //Hide all tab content
          var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
          $(activeTab).fadeIn(); //Fade in the active ID content
          return false;
      });
  
  });
  
  ul.tabs {
      margin: 0;
      padding: 0;
      float: left;
      list-style: none;
      height: 32px; /*--Set height of tabs--*/
      border-bottom: 1px solid #999;
      border-left: 1px solid #999;
      width: 100%;
  }
  ul.tabs li {
      float: left;
      margin: 0;
      padding: 0;
      height: 31px; /*--Subtract 1px from the height of the unordered list--*/
      line-height: 31px; /*--Vertically aligns the text within the tab--*/
      border: 1px solid #999;
      border-left: none;
      margin-bottom: -1px; /*--Pull the list item down 1px--*/
      overflow: hidden;
      position: relative;
      background: #e0e0e0;
  }
  ul.tabs li a {
      text-decoration: none;
      color: #000;
      display: block;
      font-size: 1.2em;
      padding: 0 20px;
      border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
      outline: none;
  }
  ul.tabs li a:hover {
      background: #ccc;
  }
  html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
      background: #fff;
      border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
  }
  .tab_container {
      border: 1px solid #999;
      border-top: none;
      overflow: hidden;
      clear: both;
      float: left; width: 100%;
      background: #fff;
  }
  .tab_content {
      padding: 20px;
      font-size: 1.2em;
  }
  </code></pre>
  
  <p>How To Fix This! <a href="http://jsfiddle.net/eSHdb/1/" rel="nofollow">LIVE Action Demo</a> </p>