Eu sei como usar a macro de guias no Tiddlywiki, mas há alguns casos em que não quero um Tiddler inteiro dedicado a algumas linhas.
Não sou muito bom com codificação, então tenho tropeçado principalmente em diferentes exemplos de guias CSS que encontro em pesquisas no Google. O que tive mais sucesso (que está abaixo) é algo que encontrei neste site.
Qualquer ajuda seria apreciada. Obrigado.
A parte HTML.
<div class="tabs">
<input type="radio" id="tab1" name="tabs" checked>
<input type="radio" id="tab2" name="tabs">
<input type="radio" id="tab3" name="tabs">
<div class="tab-labels">
<label for="tab1">Tab 1</label>
<label for="tab2">Tab 2</label>
<label for="tab3">Tab 3</label>
</div>
<div id="content1" class="tab-content">
<h2>Tab 1</h2>
<p>This is the content for Tab 1.</p>
</div>
<div id="content2" class="tab-content">
<h2>Tab 2</h2>
<p>This is the content for Tab 2.</p>
</div>
<div id="content3" class="tab-content">
<h2>Tab 3</h2>
<p>This is the content for Tab 3.</p>
</div>
</div>
E a parte CSS.
.tabs {
display: block;
flex-direction: column;
padding-right: 1em;
}
.tabs .tab-labels {
display: flex;
gap: 3px;
}
.tabs input[type="radio"] {
display: none;
}
.tabs label {
font-size: 15px;
padding: 0.25em;
background: #353235;
border-left: 10px;
cursor: pointer;
}
.tabs input[type="radio"]:checked + label {
background-color: #4a4a4a;
border-bottom: 2px solid blue;
}
.tab-content {
padding-left: 1em;
border: 5px solid gray;
display: none;
background: #353935;
}
/* Show tab content when corresponding radio button is checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
display: block;
}
Tudo o que encontrei/pesquisei sugere algo relacionado a:
input[type="radio"]:checked + .tab-label {
}
É o que faz a aba selecionada realçada funcionar, mas nada que eu tenha tentado faz o código que eu tenho ficar destacado no Tiddlywiki. Eu tentei usar diferentes exemplos de abas CSS da net, mas nada realmente funciona para mim.
Meu conhecimento de codificação é praticamente nulo, e o que estou usando aqui provavelmente está faltando alguma parte crucial, mas isso é porque estou focado principalmente na saída. Eu apenas encontro alguns exemplos de codificação, comparo e contrastei, às vezes tento ajustar algumas variáveis para um sucesso modesto ou uma falha esperada.
+
é o próximo combinador irmão - mas seus rótulos não são o próximo irmão de suas respectivas caixas de seleção. Você precisa lidar com isso da mesma forma que fez com os elementos de conteúdo da guia - usando o combinador irmão subsequente,~
. E os rótulos também não são irmãos das caixas de seleção, então você precisa mirar no irmão real.tab-labels
primeiro e, então, nos rótulos dentro dele.No momento, os rótulos não têm IDs. Você pode adicionar alguns ou segmentá-los por meio do conteúdo do
for
atributo.