重建已单击的按钮样式

Reestablishing a clicked button style

本文关键字：按钮 样式 单击 重建      更新时间：2023-09-26

我需要一些帮助:我做了三个按钮，一旦我点击其中一个，它的样式应该通过Javascript改变。这是有效的。但应该会发生别的事情:一旦我再次点击按钮，旧的样式就会恢复。看看下面的代码:

function changeStyleOne(){
if(this.style.background != 'rgba(207,207,207,.8)'){
    this.style.background = 'rgba(207,207,207,.8)';
    this.style.boxShadow = '0 5px 20px rgba(0,0,0,.3) inset';
    this.style.borderLeft = '0';
    this.style.width = '99px';
    button2.style.background = '-webkit-linear-gradient(bottom, #B9B9B9 0%, white 90%)';
    button2.style.width = '98px';
    button2.style.borderLeft = '1px solid white';
    button2.style.boxShadow = '';
    button3.style.background = '-webkit-linear-gradient(bottom, #B9B9B9 0%, white 90%)';
    button3.style.width = '98px';
    button3.style.borderLeft = '1px solid white';
    button3.style.boxShadow = '';
displayContent1();
}else{
    this.style.background = '-webkit-linear-gradient(bottom, #B9B9B9 0%, white 90%)';
    this.style.boxShadow = '';
    this.style.borderLeft = '1px solid white';
    this.style.width = '98px';
}

}

这不起作用:当我再次点击按钮时，它不会恢复旧的样式。你知道为什么吗?

下面是一个简单的例子，

http://jsfiddle.net/LT4sQ/

.class1 {
    background: -webkit-linear-gradient(bottom, #B9B9B9 0%, white 90%);
    box-shadow: none;
    border-left: 1px solid white;
    width: 98px;
}
.class2 {
    background: rgba(207, 207, 207, .8);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .3) inset;
    border-left: 0;
    width: 99px;
}
function changeStyleOne(e) {
    e.className = (e.className == "class1") ? "class2" : "class1";
}

这里有一个你可以学习的简单例子:

HTML: 

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
CSS: 

.styled {
    background: lightblue;
}
jQuery: 

$("button").click(function() {
   $(this).toggleClass('styled');
});
演示

相关文章：