Question

我需要一些帮助：我制作了三个按钮，一旦我点击其中一个按钮，它的样式应该通过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';
}

}

这不起作用：当我再次单击该按钮时，它不会恢复旧样式。你知道为什么吗？

Answer 1

这是一个简单的例子，

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

Answer 2

以下是一个可以学习的简单示例：

HTML：

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

CSS：

.styled {
    background: lightblue;
}

jQuery：

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

Demo

重新建立单击按钮样式

2 个答案: