0

我需要一些帮助：我制作了三个按钮，单击其中一个按钮后，应通过 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';
}

}

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

4

2 回答 2

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";
}
于 2013-04-28T00:01:46.790 回答
0

下面是一个简单的例子，你可以从中学习：

HTML：

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

CSS：

.styled {
    background: lightblue;
}

jQuery：

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

演示

于 2013-04-28T00:37:30.327 回答