如果选中复选框，请更改字体颜色

Question

问题

如果选中该复选框，则按钮的字体颜色将变为蓝色，但如果我单击其他2个按钮之一，则字体颜色仍为橙色。 如果未选中该复选框，则主页按钮将为白色而不是橙色。

代码

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>

如果可能没有jQuery。

Answer 1

最简单的方法可能是创建和切换类本身，而不是对样式更改进行硬编码。我创建了一些更多的样式：.orange和.active-blue，我已经直接删除了对CSS样式的所有引用。现在，我只是简单地切换橙色和蓝色样式，而不是切换颜色。在按钮的情况下，我正在切换activeClass（在'active'和'active-blue'之间），并且我已将其保存为可在按钮的click处理程序中使用的变量。

希望这有帮助！

var fontcolor = document.getElementsByClassName('color');
var cbs = document.querySelectorAll('input[type=checkbox]');
var activeClass = "active";


for (var i = 0; i < cbs.length; i++) {
  cbs[i].addEventListener('change', function() {
    var currentActive = document.getElementsByClassName(activeClass)[0];
    if (this.checked) {
      fontcolor[0].classList.remove("orange");
      fontcolor[1].classList.remove("orange");
      currentActive.classList.remove("active");
      fontcolor[0].classList.add("blue");
      fontcolor[1].classList.add("blue");
      currentActive.classList.add("active-blue");
      activeClass = "active-blue";
    } else {
      fontcolor[0].classList.add("orange");
      fontcolor[1].classList.add("orange");
      currentActive.classList.add("active");
      fontcolor[0].classList.remove("blue");
      fontcolor[1].classList.remove("blue");
      currentActive.classList.remove("active-blue");
      activeClass = "active";
    }
  });
};



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(activeClass);
    current[0].classList.remove(activeClass);
    this.classList.add(activeClass);
  });
};

.color {
  font-weight: 700;
}

.orange {
  color: #FF8000;
}

.blue {
  color: #0099FF;
}

.tab.active-blue {
  color: #0099FF;
}

.tab.active,
.tab:active {
  color: #FF8000;
}

.tab {
  background-color: #444;
  border: none;
  color: #FFF;
  padding: 12px 36px;
}

<p>Simple <span class="color orange">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">Home</span>
  </button>
  <button type="button" id="btn3" class="tab tab-settings">
    <span class="icon icon-cog">Settings</span>
  </button>
</div>

<p><span class="color orange">Text</span> because Text is cool.</p>

<label class="color-switch"><input type="checkbox" id="check"/><span class="slider round"></span> Color Switch</label>

Answer 2

您可以尝试其他方式。您应该将所有内容保留在父div下，然后只需为切换颜色添加css类。所以HTML就像下面

<强> HTML

<div id="switchColor"><!--parent div-->
<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>
</div>

<强> CSS

.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;
}

.changeColor .tabs .active, 
.changeColor .color{
    color: #0099FF;
}

<强>的Javascript

var fontcolor = document.getElementsByClassName('color');
var currentActive = document.getElementsByClassName('active');
var parentDiv = document.getElementById('switchColor');

document.getElementById('check').addEventListener('change', function() {
    if (this.checked) {
     parentDiv.classList.add('changeColor');
    } else {
      parentDiv.classList.remove('changeColor')
    }
  });



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 Change Javascript上的Ripon（@flex4web）笔CodePen。

Answer 3

您可以使用javascript和事件监听器来执行此类操作。

var activeBtn = document.getElementById('btn2');
var altColor = false;
document.getElementById('check').addEventListener('change', function() {
  altColor = this.checked;
  activeBtn.style.color = altColor ? 'green' : 'orange';
});

function toggleStyles() {
  activeBtn = this;
  var btns = document.getElementById('tabs').children;
  var i;
  for (i = 0; i < btns.length; i++) {
    if (btns[i].id == activeBtn.id) {
      btns[i].style.color = altColor ? 'green' : 'orange';
    } else {
      btns[i].style.color = 'white';
    }
  }
}
document.getElementById('btn1').addEventListener('click', toggleStyles);
document.getElementById('btn2').addEventListener('click', toggleStyles);
document.getElementById('btn3').addEventListener('click', toggleStyles);

.color {
  font-weight: 700;
}

.orange {
  color: #FF8000;
}

.blue {
  color: #0099FF;
}

.tab.active-blue {
  color: #0099FF;
}

.tab.active,
.tab:active {
  color: #FF8000;
}

.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>