title: Keep selected tab highlighted in menu using CSS
body: <p>Due to new eBay rules coming into effect in June 2017, all listings are not allowed active content.</p>
  
  <p>I have created a tab menu using html and CSS. I need to keep the selected tab highlighted using non active and preferably responsive CSS and HTML.</p>
  
  <p>Usually I would use J.S to change an active ID which CSS can manipulate.</p>
  
  <p>What I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#menb {
    cursor: pointer;
    width: 150px;
    display: inline-block;
    background-color: #BC2400;
    color: white;
    font-weight:bold;  
    text-align: center;
    transition: .25s ease;
    border: none;
    padding: 10px;
    border-radius: 12px 12px 0 0;
  }
  
  #menu_area a {
      color: #ffffff;
      text-decoration: none;      
  }    
  
  #menu_area a:hover {
      color: #ffbf01;
      text-decoration: none;       
  }
  
  #menu_area a:active {
      text-decoration: none;    
      color: #ffbf01;
  }      
        
  .tab-folder &gt; .tab-content:target ~ .tab-content:last-child, .tab-folder &gt; .tab-content {
      display: none;
  }
  .tab-folder &gt; :last-child, .tab-folder &gt; .tab-content:target {
      display: block;
  }
  
  #postage {
      font-family:verdana, arial, sans-serif;
      text-align:center;
      text-justify: distribute;
      color:red;
      font-size:12px;
  }
  
  #button {
      display: inline;
      text-decoration: none;    
      border: 1px solid #B7B7B7; 
      background: #F7F7F7 url(http://www.electrohero.com/ebay/images/tabbut.gif) repeat-x 0 0;    
      background-color:#FFF;
      -moz-border-radius: 8px; 
      -webkit-border-radius: 8px; 
      border-radius: 8px;
      width: 130px;
      font-weight:bold;
      color: #f5f5f5;
      /*margin: 0 auto;*/  
      margin-right:8px; /*distance between buttons*/    
      padding: 4px 4px 4px 4px; 
      font-family: Verdana,Arial,Helvetica,sans-serif;     
      font-size: 12px;
      text-align: center;       
  }
  
  #button a:link a:visited a:hover {
      text-decoration: none;
      color: #f5f5f5; 
      font-weight:bold;       
  }​</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;  
    &lt;link href="simple.css" rel="stylesheet" type="text/css" /&gt; 
  &lt;/head&gt;
    
  &lt;body style="margin:0px"&gt;  
  
    &lt;p&gt;Some text....&lt;/p&gt;   
      
    &lt;br /&gt;&lt;br /&gt; 
                                                  
    &lt;div id="menu_area"&gt;
        &lt;button id="menb"&gt;&lt;a href="#tab1"&gt;Menu 1&lt;/a&gt;&lt;/button&gt;
        &lt;button id="menb"&gt;&lt;a href="#tab2"&gt;Menu 2&lt;/a&gt;&lt;/button&gt;
        &lt;button id="menb"&gt;&lt;a href="#tab3"&gt;Menu 3&lt;/a&gt;&lt;/button&gt;
        &lt;button id="menb"&gt;&lt;a href="#tab4"&gt;Menu 4&lt;/a&gt;&lt;/button&gt;
    &lt;/div&gt;      
    &lt;div class="tab-folder"&gt;
      &lt;div id="tab2" class="tab-content"&gt;
      &lt;p&gt;Menu 2&lt;/p&gt;
      &lt;/div&gt;                             
  
      &lt;div id="tab3" class="tab-content"&gt;
      &lt;p&gt;Menu 3&lt;/p&gt;
      &lt;/div&gt;  &lt;!-- end view3 --&gt;    
  
      &lt;div id="tab4" class="tab-content"&gt; &lt;!-- tab - What's sent --&gt;                         
      &lt;p&gt;Menu 4&lt;/p&gt;
      &lt;/div&gt;  &lt;!-- end tab 4 --&gt;    
  
      &lt;div id="tab1" class="tab-content"&gt; &lt;!-- tab - Compatible Devices --&gt;                                 
      &lt;p&gt;Menu 1&lt;/p&gt;                                                                                       
      &lt;/div&gt; &lt;!-- end view1 --&gt; 
    &lt;/div&gt;   &lt;!-- end tab-folder --&gt;
      
    &lt;/body&gt; 
  &lt;/html&gt;​</code></pre>
  </div>
  </div>
  </p>