Home>

I want to switch tabs with just css in wordpress

The above page is pasted as is

It feels like an image
The radio button hasn't disappeared

None of what is displayed when switching

I pasted similar code from various sites, but none of them were successful
What are the possible causes?

html is

<div class ="tabs-sample">
<!-↓ Switching tab (radio button)->
<input id ="sample01"type ="radi"name ="tab_item"checked><label class ="tab_item"for ="sample01">sample01</label><input id ="sample02"type ="radio"name ="tab_item"><label class ="tab_item"for ="sample02">sample02</label>
<!-↓ Switching element (sample01)->
<div class ="tab_content"id ="sample01_content">
<!-↓ Contains the content of the switching element (sample01)->
</div>
<!-↓ Switching element (sample02)->
<div class ="tab_content"id ="sample02_content">
<!-↓ Contains the content of the switching element (sample02)->
</div>
</div>

css
/ * Remove all radio buttons */
input [name ="tab_item"] {
display: none;
}
/ * Show only the content of the selected tab */

sample01: checked ~ # sample01_content, sample02: checked ~ # sample02_content {

display: block;
}
/ * Change the style of the selected tab */
div.tabs-sample input: checked + .tab_item {
background-color: # 000;
color: #fff;
}
/ * Overall tab switching style (optional) */
div.tabs-sample {
text-align: center;
}
/ * Tab style (optional) */
.tab_item {
padding: 10px 45px;
border: solid # 000 1px;
background-color: #fff;
font-size: 18px;
text-align: center;
line-height: 1em;
color: # 333;
display: inline-block;
font-weight: bold;
transition: all 0.2s ease;
margin: 0;
}
.tab_item: hover {
opacity: 0.75;
}
/ * Tab switching content style (optional) */
.tab_content {
display: none;/* ← only required */
border: solid #ccc 1px;
margin: 50px 0 0;
padding: 25px;
}

Pasting

  • Answer # 1

    Css alone just seems to be difficult to switch tabs with wordpress, so give up and look for using js
    Thank you very much