0

サイトにメニューのスタイル スイッチャーを配置したいのですが、Chrome / IE / Safari では機能しません (FireFox ではうまく機能します)。ここにいくつかのコードがあります：

    // Menu Style Switcher
    $("#option-1").click(function(){
        $("#navigation").removeClass("style-2");
    });

    $("#option-2").click(function(){
        $("#navigation").addClass("style-2");
    });


<div class="menu-style">
    <select>
        <option id="option-1">Style 1</option>
        <option id="option-2">Style 2</option>
    </select>
</div>
4

2 に答える 2

5

はaddClassName存在しません。関数の正しい名前はaddClass

その他の改善点は、オプションの代わりに要素のchangeイベントを使用することです..selectclick

// Menu Style Switcher
$('.menu-style select').change(function(){
    if (this.value === 'Style 1'){
        $("#navigation").removeClass("style-2");
    } else {
        $("#navigation").addClass("style-2");
    }
});
于 2012-12-30T00:52:50.770 に答える
1

要素change全体でイベントをリッスンする必要があります。<select>

マークアップ:

<select id="yourSelect">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

JS :

$('#yourSelect').change(function(e){

    if( $(this).val() == 1){

        $("#navigation").removeClass("style-2");        

    }else{

        $("#navigation").addClass("style-2");        

    }
}

フィドルを参照してください。

于 2012-12-30T00:52:24.287 に答える