作爲選項卡的單選按鈕

我想將單選按鈕顯示爲選項卡。在此之後codepen，我在我的項目中嘗試了這個。但是當我點擊僞選項卡時，沒有任何反應。它沒有得到checked。作爲選項卡的單選按鈕

我該如何達到效果？

input.tgl-radio-tab-child { 
 
    position: absolute; 
 
    left: -99999em; 
 
    top: -99999em; 
 
    opacity: 1; 
 
    z-index: 1; 
 
} 
 

 
input.tgl-radio-tab-child+label { 
 
    cursor: pointer; 
 
    float: left; 
 
    border: 1px solid #aaa; 
 
    margin-right: -1px; 
 
    padding: .5em 1em; 
 
    position: relative; 
 
} 
 

 
input.tgl-radio-tab-child+label:hover { 
 
    background-color: #eee; 
 
} 
 

 
[type=radio]:checked+label { 
 
    background-color: #c30; 
 
    z-index: 1; 
 
}

<label for="abc">ABC<span style="color: red;">*</span></label> 
 
<div class="form-check"> 
 
    <div class="tgl-radio-tabs"> 
 
    <input type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label class="radio-inline">ABCDEFGHIJKL</label> 
 
    <input type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label class="radio-inline">MNOPQRSTUVWXYZ</label> 
 
    </div> 
 
</div>

來源

2017-07-18 input

您必須添加每個標籤的'for'屬性將其鏈接到一個必須設置的輸入等於輸入元素的「id」屬性。仔細查看codepen。 – Blazemonger

您需要通過for屬性，它應該引用相應的輸入的ID給您的標籤綁定到您的輸入：

input.tgl-radio-tab-child { 
 
    position: absolute; 
 
    left: -99999em; 
 
    top: -99999em; 
 
    opacity: 1; 
 
    z-index: 1; 
 
} 
 

 
input.tgl-radio-tab-child+label { 
 
    cursor: pointer; 
 
    float: left; 
 
    border: 1px solid #aaa; 
 
    margin-right: -1px; 
 
    padding: .5em 1em; 
 
    position: relative; 
 
} 
 

 
input.tgl-radio-tab-child+label:hover { 
 
    background-color: #eee; 
 
} 
 

 
[type=radio]:checked+label { 
 
    background-color: #c30; 
 
    z-index: 1; 
 
}

<label for="abc">ABC<span style="color: red;">*</span></label> 
 
<div class="form-check"> 
 
    <div class="tgl-radio-tabs"> 
 
    <input id="x" type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label for="x" class="radio-inline">ABCDEFGHIJKL</label> 
 
    <input id="y" type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label for="y" class="radio-inline">MNOPQRSTUVWXYZ</label> 
 
    </div> 
 
</div>

來源

2017-07-18 19:39:11 j08691

就是這樣！謝謝。 – input

作爲選項卡的單選按鈕

回答

相關問題