Как с радио кнопками сделать таб

431

20 февраля 2017, 18:09

Есть две радио кнопки, надо сделать из них таб.

<div class="btn-group btn-group" data-toggle="buttons">
    <label class="my_b btn">
     <input type="radio" name='gender1' >
     <i class="fa fa-circle-o fa-2x"></i>
     <i class="fa fa-dot-circle-o fa-2x"></i> 
     <span>Tab 1</span>
     </label>
    <label class="my_b btn active">
     <input type="radio" name='gender1' checked>
     <i class="fa fa-circle-o fa-2x"></i>
     <i class="fa fa-dot-circle-o fa-2x"></i>
     <span>Tab 2</span>
    </label>
</div>

Answer 1

Можно, например, так:

label { 
  text-align: center; 
  border: 1px solid black; 
  cursor: pointer; 
  display: inline-block; 
  width: 57px; 
} 
 
input { 
  display: none; 
} 
 
.tab1, .tab2 { 
  width: 120px; 
  height: 60px; 
  border: 1px solid black; 
  border-top: none; 
  display: none; 
  text-align: center; 
  padding-top: 10px; 
  color: white; 
} 
 
.tab1 { 
  background-color: green; 
} 
 
.tab2 { 
  background-color: blue; 
} 
 
#tab1:checked ~ div.tab1, 
#tab2:checked ~ div.tab2 { 
  display: block; 
}

<label for="tab1" class="my_b btn">Tab 1</label> 
<input type="radio" id="tab1" name='gender1' > 
      
<label for="tab2" class="my_b btn active">Tab 2</label> 
<input type="radio" id="tab2" name='gender1' checked> 
     
<div class="tab1"> 
  Это содержимое таба номер 1 
</div> 
 
<div class="tab2"> 
  Это содержимое таба номер 2 
</div>