title: Tabbed view of pages using css and javascript
body: <p>I want to create a tabbed view of pages similar to that of the profile page of stack overflow, as can be seen in the image below.</p>
  
  <p><img src="https://i.stack.imgur.com/0296K.png" alt="enter image description here"></p>
  
  <p>I have been able to create a tabbed interface, but I am unable to remove the border below the tab, because the border has been actually given to the div below. If I give the border to the tab, then I can't extend the border over the area where there is not a tab.</p>
  
  <p>Here is the html that I am using</p>
  
  <pre><code>    &lt;div id="centerDiv"&gt;
          &lt;div id="centeredMenu"&gt;
              &lt;ul class="tabs"&gt;
                  &lt;li&gt;&lt;a class="active" href="#"&gt;Questions&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Blogs&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Posts&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div style="clear:both;"&gt;&lt;/div&gt;
  
      &lt;div class="favContentBox"&gt;
       &lt;!-- The content goes here --&gt;
      &lt;/div&gt;
  
      &lt;div class="favContentBox"&gt;
       &lt;!-- The content goes here --&gt;
      &lt;/div&gt;
  
      &lt;div class="favContentBox"&gt;
       &lt;!-- The content goes here --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I have as many <code>favContentBox</code> as there are the <code>ul</code> <code>li</code> elements. And the javascript is </p>
  
  <pre><code>$(document).ready(function(){
  
      var currentTab = 0; 
  
      function openTab(clickedTab) {
          var thisTab = $(".tabs a").index(clickedTab);
          $(".tabs li a").removeClass("active");
          $(".tabs li a:eq("+thisTab+")").addClass("active");
          $(".favContentBox").hide();
          $(".favContentBox:eq("+thisTab+")").show();
          currentTab = thisTab;
      }
  
      $(".tabs li a").click(function() { 
          openTab($(this)); 
          return false; 
      });
  
      $(".tabs li a:eq("+currentTab+")").click()
  
  });
  </code></pre>
  
  <p>And the <code>css</code> goes like this</p>
  
  <pre><code>.favContentBox
  {
      border:1px solid #808080;
      padding-left:20px;
      padding-right:20px;
      min-height: 500px;
  
  }
  
  .tabs
  {
      margin:0 0 0 0;
      padding:0 0 0 0;
      left:50%;
      text-align:center;
      clear:left;
      position:relative;
      float:left;
  }
  .tabs li 
  {
      list-style: none;
      float: left; 
      right:50%;
      display:block;
      position:relative;
  }
  
  .tabs li a
  {
      display: block;
      color:black;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      width:100px;
      padding: 5px 0 5px 0;
      border-left: 1px solid #808080;
      border-top: 1px solid #808080;
      border-right: 1px solid #808080;
      margin-left:20px;
      background-color:#F0F0F0;
  }
  </code></pre>