0

助けが必要です。3 つのボタンを作成しました。そのうちの 1 つをクリックすると、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 に答える