Problem
If the checkbox is checked the font color of the buttons are changing to blue, but if i click one of the other 2 buttons the font color is still orange. If the checkbox is unchecked after, the home button will be white instead of orange.
Code
var fontcolor = document.getElementsByClassName('color');
var cbs = document.querySelectorAll('input[type=checkbox]');
var currentActive = document.getElementsByClassName('active');
for (var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if (this.checked) {
fontcolor[0].style.color = "#0099ff";
fontcolor[1].style.color = "#0099ff";
currentActive[0].style.color = "#0099ff";
} else {
fontcolor[0].style.color = "#FF8000";
fontcolor[1].style.color = "#FF8000";
currentActive[0].style.color = "#FFF";
}
});
};
var tab = document.getElementById('tabs');
var tabs = tab.getElementsByClassName('tab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function() {
var current = document.getElementsByClassName('active');
current[0].className = current[0].className.replace(' active', "");
this.className += " active";
});
};
.color {
color: #FF8000;
font-weight: 700;
}
.tab.active,
.tab:active {
color: #FF8000;
}
.blue {
color: #0099FF;
}
.tab {
background-color: #444;
border: none;
color: #FFF;
padding: 12px 36px;
}
<p>Simple <span class="color">Text</span></p>
<div class="tabs" id="tabs">
<button type="button" id="btn1" class="tab tab-library"><span class="icon icon-menu">Library</span></button>
<button type="button" id="btn2" class="tab tab-home active"><span class="icon icon-home"></span>Home</button>
<button type="button" id="btn3" class="tab tab-settings"><span class="icon icon-cog"></span>Settings</button>
</div>
<p><span class="color">Text</span> because Text is cool.</p>
<label class="color-switch"><input type="checkbox" id="check"/><span class="slider round"></span> Color Switch</label>
If possible no jQuery.
Aucun commentaire:
Enregistrer un commentaire