单击后更改按钮样式 [英] Change button styling after clicked

问题描述

我想要一个按钮，在它被点击后改变它的外观并让它保持这种状态.我已经尝试过使用button:focus"的 css 并且它会起作用，但是一旦单击另一个按钮或其他任何按钮，任何以前选择的按钮都会恢复到它的原始样式.

我有默认样式集和悬停样式集，但无法保留访问/点击的样式.我不希望它在页面重新加载之前返回.这是你用 css 做不到的，必须用 JS 来实现吗?

这会有点冗长，但这是我目前所拥有的:

HTML:

<button id=p1Button><span>玩家一，请选我！</span></button><button id=p2Button><span>二号玩家请选我！</span></button>

CSS:

按钮{宽度:16em；白颜色;背景:#0392CF；字体粗细:800；字体大小:1.5em；背景附件:固定；边界半径:0.25em；光标:指针；边界:无；边距:0.5；高度:2.2；过渡持续时间:1.5s；转换时序函数:线性；}按钮:悬停{白颜色;背景:#F37736；边界半径:2em；宽度:13em；}按钮:悬停跨度{显示:无；}按钮:悬停:之前{内容:点击点击！";字母间距:0.25em；}按钮:焦点{白颜色;背景:#F37736；边界半径:2em；宽度:13em；}按钮:焦点跨度{显示:无；}按钮:焦点:之前{内容:点击！";字母间距:0.25em；}

解决方案

最好的方法似乎是使用 JavaScript.更简单的方法是使用 jQuery.

在一个js文件中，把下面的代码用jQuery来做

$("#p1Button").click(function(){$(this).addClass("yourClassName");});

如果你不想使用 jQuery，那么使用如下代码，在 HTML 中，引用该函数，如 <button onclick="clickedOnButton(this)" id=p1Button><span>玩家一，请选我！</span></button>

函数 clickedOnButton(this){this.className+='yourClassName';}

也在css文件中添加一个类

.yourClassName{/* 单击按钮时使用的样式.*/}

I'm wanting a button to change it's appearance AFTER it's been clicked on and have it stay that way. I've tried css using "button:focus" and it'll work, but as soon as another button or anything else is clicked any previously selected button will rever back to it's original styling.

I have default styling set and hover styling set but can't get the visited/clicked-on styling to stay. I don't want it to go back till the page is reloaded. Is this something you can't do with css and have to implement with JS?

This is going to be a bit lengthy, but here is what I have so far:

Html:

<div style="text-align:center;">
  <button id=p1Button><span>Player One, please select me! </span></button>
  <button id=p2Button><span>Player Two, please select me! </span></button>
</div>

CSS:

button{
  width: 16em;
  color: white;
  background: #0392CF;
  font-weight: 800;
  font-size: 1.5em;
  background-attachment: fixed;
  border-radius: .25em;
  cursor: pointer;
  border: none;
  margin: .5;
  height: 2.2;
  transition-duration: 1.5s;
  transition-timing-function: linear;
}
button:hover {
  color: white;
  background: #F37736;
  border-radius: 2em;
  width: 13em;
}
button:hover span {
  display: none;
}
button:hover:before {
  content:"Clicky Clicky!";
  letter-spacing: .25em;
}
button:focus {
  color: white;
  background: #F37736;
  border-radius: 2em;
  width: 13em;
}
button:focus span {
  display: none;
}
button:focus:before {
  content:"Clicked!";
  letter-spacing: .25em;
}

解决方案

The best way to do this seems to be by using JavaScript. And easier way will be to use jQuery.

In a js file, put the following code to do it with jQuery

$("#p1Button").click(function(){
    $(this).addClass("yourClassName");
});

If you don't want to use jQuery, then use the code as follows and in HTML, give a reference to that function like <button onclick="clickedOnButton(this)" id=p1Button><span>Player One, please select me! </span></button>

function clickedOnButton(this)
{
    this.className+='yourClassName';
}

Add a class in the css file too

.yourClassName
{
   /* Style to use when clicked on button. */
}

这篇关于单击后更改按钮样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！