时间戳

首页 > 解决方案 > 如何根据按钮单击更改页面样式

javascript - 如何根据按钮单击更改页面样式

问题描述

我正在制作一个页面，当用户单击一个按钮时，某些样式会发生变化，但是，该页面应该加载第一个选择的按钮。

我让这段代码在加载时运行并应用第一类：

$(function() {$('button.volt:first').addClass('voltActive');});

这改变了应用的类：

changeClass: function () {
   $("button.volt").removeClass('voltActive');
   $("button.volt").toggleClass('voltActive');
}

那是我的CSS：

.volt{
  font-size: 20px;
  border-color: #333;
  border-radius: 10px;
  border-style: dotted;
  margin-left: 25px;
  height: 55px;
  width: 135px;
  background-color: transparent;
}

.voltActive{
 border-color: blue;
 border-style: solid;
 outline: none;
}

那是我的按钮：

<button data-bind="click:$parents[1].changeClass()" class="volt"></button>

但不工作。有人可以帮助我吗？

标签： javascriptjqueryhtmlcss

解决方案

toggleClass()改变类的状态。如果它已经在控件上，它将删除它，如果它不在控件上，它将添加它。因此，您将其删除，然后toggleClass再次调用以添加它。

只需切换它。

changeClass: function () {
          $("button.volt").toggleClass('voltActive');
}

推荐阅读