更改文本顏色onclick

我有一個切換按鈕，當我單擊按鈕時，我希望能夠將文本顏色從較淺的顏色更改爲未選擇時變爲黑色。現在它只能在其中一個按鈕上工作。附件是我的代碼的小提琴。 https://jsfiddle.net/h2db7qLp/更改文本顏色onclick

function onContainerClick(event) { 
 
    if (event.classList.contains('off')) { 
 
    event.classList.remove('off'); 
 
    } else { 
 
    event.classList.add('off'); 
 
    } 
 
}

.container { 
 
    background: #EFEFEF; 
 
    position: relative; 
 
    width: 126px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-top: #CCC solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-bottom: #EEE solid 1px; 
 
    border-right: #ddd solid 1px; 
 
    border-left: #ddd solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 
.container2 { 
 
    background: #EFEFEF; 
 
    position: relative; 
 
    width: 226px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-top: #CCC solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-bottom: #EEE solid 1px; 
 
    border-right: #ddd solid 1px; 
 
    border-left: #ddd solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 
.switch { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    transition: all 0.15s ease; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 
.switch-title { 
 
    margin-bottom: 6px; 
 
    font-size: 16px; 
 
} 
 
.container.off {} .container.off .switch, 
 
.container2.off .switch { 
 
    left: 50%; 
 
    background-color: #fff; 
 
} 
 
.container2.off .left-long, 
 
.container.off .left-short, 
 
.container2.on .right-long, 
 
.container.on .right-short { 
 
    color: #aaa; 
 
} 
 
.label { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    text-align: center; 
 
    padding-top: 11px; 
 
    z-index: 1; 
 
    font: 16px"adiHaus", Arial, sans-serif; 
 
    font-weight: bolder; 
 
    color: #000; 
 
} 
 
.label.right-long { 
 
    left: 50%; 
 
} 
 
.label.right-short { 
 
    left: 50%; 
 
}

<div class="switch-title">Hand:</div> 
 
<div class="container" id="container" onclick="onContainerClick(this)"> 
 
    <div class="switch" id="switch"> 
 
    </div> 
 
    <div class="label left-short" onclick="onContainerClick(this)">L</div> 
 
    <div class="label right-short" onclick="onContainerClick(this)">R</div> 
 
</div>

來源

2016-05-24 sizemattic

我添加的JavaScript – sizemattic

請看看這個【答案】（http://stackoverflow.com/a/14273784/2565294） – Nora

你爲什麼對事件處理程序L和R div以及容器？ – j08691

我認爲，通過添加類「上」的變化一切順利，你也不必呼籲每格處理程序，只需調用一次。

function onContainerClick(event) { 
 
    if (event.classList.contains('off')) { 
 
    event.classList.remove('off'); 
 
    event.classList.add('on'); 
 
    } else { 
 
    event.classList.add('off'); 
 
    event.classList.remove('on'); 
 
    } 
 
}

.container { 
 
    background: #EFEFEF; 
 
    position: relative; 
 
    width: 126px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-top: #CCC solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-bottom: #EEE solid 1px; 
 
    border-right: #ddd solid 1px; 
 
    border-left: #ddd solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
}  
 

 
.container2 { 
 
    background: #EFEFEF; 
 
    position: relative; 
 
    width: 226px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-top: #CCC solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-bottom: #EEE solid 1px; 
 
    border-right: #ddd solid 1px; 
 
    border-left: #ddd solid 1px; 
 
    border-radius: 2px 0 0 2px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
}  
 

 
.switch { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    transition: all 0.15s ease; 
 
    left: 0; 
 
    z-index: 1; 
 
}  
 

 
.switch-title { 
 
    margin-bottom: 6px; 
 
    font-size: 16px; 
 
}  
 

 
.container.off {}  
 

 
.container.off .switch, 
 
.container2.off .switch { 
 
    left: 50%; 
 
    background-color: #fff; 
 
}  
 

 
.container2.off .left-long, 
 
.container.off .left-short, 
 
.container2.on .right-long, 
 
.container.on .right-short { 
 
    color: #aaa; 
 
}  
 

 
.label { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    text-align: center; 
 
    padding-top: 11px; 
 
    z-index: 1; 
 
    font: 16px "adiHaus", Arial, sans-serif; 
 
    font-weight: bolder; 
 
    color: #000; 
 
}  
 

 
.label.right-long { 
 
    left: 50%; 
 
}  
 

 
.label.right-short { 
 
    left: 50%; 
 
}

<div class="switch-title">Hand:</div> 
 
<div class="container on" id="container" onclick="onContainerClick(this)"> 
 
    <div class="switch" id="switch"> 
 
    </div> 
 
    <div class="label left-short">L</div> 
 
    <div class="label right-short">R</div> 
 
</div>

來源

2016-05-24 19:57:40

Dude你是一個救星！謝謝！！！ – sizemattic

更改文本顏色onclick

回答

相關問題