CSS tab system stops working when changing quantity

Asked

Viewed 534 times

3

I’m trying to use a system of tabs in pure CSS. It seemed very nice, but when I add new tabs or remove some it stops working, someone knows to tell me why?

Only with 3 tabs works well:

.tabs input[type='radio'] { 
    display:none 
}
.tabs label {
    width:100px; 
    text-align:center; 
    padding: 20px;
    color:#666666; 
    display:inline-block;
    cursor:pointer;
}
.tab-content { 
    display:none; 
    background-color:#F3F3F3; 
    border-top:6px #FE7B43 solid;  
    text-align:center; 
    padding:50px 0; 
    position:relative; 
}
#tabs-1 :checked + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + .tab-content { display: block }
 <div class="tabs" id="tabs-1">
                
                <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
                <input id="tab-1-2" name="tabs-group-1" type="radio" />
                <input id="tab-1-3" name="tabs-group-1" type="radio" />

                <label for="tab-1-1">ABA 1</label>
                <label for="tab-1-2">ABA 2</label>
                <label for="tab-1-3">ABA 3</label>

                <!-- Aba 1 -->
                <div class="tab-content">
                    asdasdasdasdasd<br><br>dfasdfsadfasdfasdasdasdasdasd<br><br>dfasdfsadfasdfasdasdasdasdasd<br><br>dfasdfsadfasdf
                </div>

                <!-- Aba 2 -->
                <div class="tab-content">
                    CONTEUDO ABA 2
                </div>

                <!-- Aba 3 -->
                <div class="tab-content">
                    CONTEUDO ABA 3
                </div>

            </div>

html css

2 answers

10


The architecture of this CSS is not the best at the time of maintenance, because it depends on the amount of intermediate elements for each tab. If generating dynamically, with a server-side language all right, but to update manually, need to be well "whole" of the operation.

First of all, see working with 4 tabs:

.tabs input[type='radio'] { 
    display:none 
}
.tabs label {
    width:100px; 
    text-align:center; 
    padding: 20px;
    color:#666666; 
    display:inline-block;
    cursor:pointer;
}
.tab-content { 
    display:none; 
    background-color:#F3F3F3; 
    border-top:6px #FE7B43 solid;  
    text-align:center; 
    padding:50px 0; 
    position:relative; 
}
#tabs-1 :checked + * + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + * + * + .tab-content { display: block }
<div class="tabs" id="tabs-1">
                
                <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
                <input id="tab-1-2" name="tabs-group-1" type="radio" />
                <input id="tab-1-3" name="tabs-group-1" type="radio" />
                <input id="tab-1-4" name="tabs-group-1" type="radio" />

                <label for="tab-1-1">ABA 1</label>
                <label for="tab-1-2">ABA 2</label>
                <label for="tab-1-3">ABA 3</label>
                <label for="tab-1-4">ABA 4</label>

                <!-- Aba 1 -->
                <div class="tab-content">
                    asdasdasdasdasd<br><br>dfasdfsadfasdfasdasdasdasdasd<br><br>dfasdfsadfasdfasdasdasdasdasd<br><br>dfasdfsadfasdf
                </div>

                <!-- Aba 2 -->
                <div class="tab-content">
                    CONTEUDO ABA 2
                </div>

                <!-- Aba 3 -->
                <div class="tab-content">
                    CONTEUDO ABA 3
                </div>

                <!-- Aba 4 -->
                <div class="tab-content">
                    CONTEUDO ABA 4
                </div>

            </div>

To work, these lines have been adjusted

#tabs-1 :checked + * + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + * + * + .tab-content { display: block }

A + * the most in the first line, for each tab, and two in the second line.

A more scalable solution would be to place checkboxes before each tab, and use the selector + absolute


Refactoring to function independent of the number of tabs

The technique is the same, but I re-ordered the fields and CSS to each radiobutton be always at the same distance from your respective tab and its contents. To increase or decrease the number of tabs, simply replicate the radio + label + div.

The only care is to make all the tabs fit on the same line.

.tabs input[type='radio'] { 
    display:none;
    position:absolute;
    left:-100px;
}
.tabs label {
    width:60px; 
    text-align:center; 
    padding: 20px;
    color:#666666; 
    display:inline-block;
    cursor:pointer;
}
.tab-content { 
    display:none; 
    position:absolute;
    left:0;
    width:100%;
    background-color:#F3F3F3; 
    border-top:6px #FE7B43 solid;  
    text-align:center; 
    padding:50px 0; 
}
#tabs-1 {position:relative}
#tabs-1 :checked + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + label + .tab-content { display: block }
<div class="tabs" id="tabs-1">
  <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
  <label for="tab-1-1">ABA 1</label>
  <div class="tab-content">
    CONTEUDO ABA 1
  </div>

  <input id="tab-1-2" name="tabs-group-1" type="radio" />
  <label for="tab-1-2">ABA 2</label>
  <div class="tab-content">
    CONTEUDO ABA 2
  </div>

  <input id="tab-1-3" name="tabs-group-1" type="radio" />
  <label for="tab-1-3">ABA 3</label>
  <div class="tab-content">
    CONTEUDO ABA 3
  </div>

  <input id="tab-1-4" name="tabs-group-1" type="radio" />
  <label for="tab-1-4">ABA 4</label>
  <div class="tab-content">
    CONTEUDO ABA 4
  </div>

  <input id="tab-1-5" name="tabs-group-1" type="radio" />
  <label for="tab-1-5">ABA 5</label>
  <div class="tab-content">
    CONTEUDO ABA 5
  </div>
</div>

4

Each time you add more tabs, you will need to increase the number of * + in the CSS in part:

#tabs-1 :checked + * + * + * + label {
  background-color: #FE7B43;
  color: #FFF;
}

#tabs-1 :checked + * + * +  * + * + * + * + * + .tab-content {
  display: block
}


.tabs input[type='radio'] {
  display: none
}
.tabs label {
  width: 100px;
  text-align: center;
  padding: 20px;
  color: #666666;
  display: inline-block;
  cursor: pointer;
}
.tab-content {
  display: none;
  background-color: #F3F3F3;
  border-top: 6px #FE7B43 solid;
  text-align: center;
  padding: 50px 0;
  position: relative;
}
#tabs-1 :checked + * + * + * + label {
  background-color: #FE7B43;
  color: #FFF;
}
#tabs-1 :checked + * + * +  * + * + * + * + * + .tab-content {
  display: block
}
<div class="tabs" id="tabs-1">
  <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
  <input id="tab-1-2" name="tabs-group-1" type="radio" />
  <input id="tab-1-3" name="tabs-group-1" type="radio" />
  <input id="tab-1-4" name="tabs-group-1" type="radio" />
  <label for="tab-1-1">ABA 1</label>
  <label for="tab-1-2">ABA 2</label>
  <label for="tab-1-3">ABA 3</label>
  <label for="tab-1-4">ABA 4</label>
  <!-- Aba 1 -->
  <div class="tab-content">
    CONTEUDO ABA 1
  </div>
  <!-- Aba 2 -->
  <div class="tab-content">
    CONTEUDO ABA 2
  </div>
  <!-- Aba 3 -->
  <div class="tab-content">
    CONTEUDO ABA 3
  </div>
  <!-- Aba 4 -->
  <div class="tab-content">
    CONTEUDO ABA 4
  </div>
</div>

  • how to do this automatically? using jQuery?

  • +1 we diagnose practically at the same time and the same thing.

  • Yp @Bacco, only that its more complete rs, I at least would not know explain why... I will delete my answer hausahs

  • @Marcelobonifazio does not exclude no, it is valid. Mine I complemented more in order to show the alternative. Leave yours, because the vows are deserved (and you actually posted even a little before mine).

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.