我正在建立一個網站，但在撥動開關方面遇到了一點問題。
我已經構建了切換按鈕，但我想添加一個功能來交換內容。
我想添加 2 個內容，它們真的很簡單，但我做不到。當向右切換時，我想在 div 中顯示一個文本，上面寫著“嘿”，當向左切換時，我想再次顯示一個文本，上面寫著“再見”。我應該添加什么？
我怎樣才能做到這一點？
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked .slider {
background-color: #E21C90;
}
input:focus .slider {
box-shadow: 0 0 1px #2196F3;
background-color: #E21C90;
}
input:checked .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>uj5u.com熱心網友回復：
要執行您需要的操作，請將事件處理程式掛接到復選框input，然后display根據該復選框的狀態切換滑塊的父元素的設定。請注意，在此示例中，我使用div元素作為父元素，但任何塊級元素都可以使用。
let mainContent = document.querySelector('#main_content');
let secondaryContent = document.querySelector('#secondary_content');
document.querySelector('.switch input').addEventListener('change', e => {
mainContent.style.display = e.target.checked ? 'block' : 'none';
secondaryContent.style.display = e.target.checked ? 'none' : 'block';
});.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked .slider {
background-color: #E21C90;
}
input:focus .slider {
box-shadow: 0 0 1px #2196F3;
background-color: #E21C90;
}
input:checked .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
#secondary_content {
display: none;
}<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div id="main_content">Slider 1</div>
<div id="secondary_content">Slider 2</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/432574.html
標籤：javascript html jQuery css WordPress