jquery - jqueryの「テーマの変更」メニューでクラスを削除する

Question

ブートストラップを使用してテスト Web サイトを作成したばかりで、リンクをクリックまたはホバーするとハイライト効果が得られるメニューがあります。さまざまな色のドロップダウン リストでテーマを変更します。

テーマのリストを下に移動すると、すべて正常に動作しますが、(たとえば) 2 番目の要素に移動してから最初の要素に戻ると、クリックの強調表示は 2 番目と同じになります。たとえば、最初のliテーマが赤で 2 番目のテーマが青の場合、青を選択するとクリックとホバーのハイライトは青になりますが、赤のテーマに戻すとホバーは赤になりますが、クリック/アクティブなハイライトは青い。

どうすればこれを修正できますか?

ここにコードの一部があります

HTML

<div class="span3 well">
    <ul class="nav nav-list">
        <li class="nav-header">Menu</li>
        <li class="divider"></li>
        <li><a class="vald" id="home_knapp" href="#">Home</a></li>
        <li><a id="products_knapp" href="#">Products/Services</a></li>
        <li><a id="about_knapp" href="#">About me</a></li>
        <li><a id="contact_knapp" href="#">Contact</a></li>
        <li class="divider"></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Themes<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li class="nav-header">Themes</li>
                <li><a id="default_theme" onclick="default_theme(); return false;" href="#">Default</a></li>
                <li><a id="red_theme" onclick="red_theme(); return false;" href="#">Red</a></li>
                <li><a id="green_theme" onclick="green_theme(); return false;" href="#">Green</a></li>
                <li><a id="yellow_theme" onclick="yellow_theme(); return false;" href="#">Yellow</a></li>
                <li><a id="pink_theme" onclick="pink_theme(); return false;" href="#">Pink</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

.default {
    text-shadow: none;
    color: #000000;
    background: #04928B;
    background-color: #04928B;
}

.red {
    text-shadow: none;
    color: #000000;
    background: #c41414;
    background-color: #c41414;
}

Jクエリ

function default_theme() {
    $('html body').css({backgroundColor: '#04928B'});
        $("div .nav li a").click(function(){
            $(".nav .default").removeClass("default");
            $(this).addClass("default");
        });
        $(".nav a").hover(function() {
            $(".nav a").css({background: ''});
            $(this).css({background: '#04928B'});
        }, function() {
            $(".nav a").css({background: ''});
        });
}


function red_theme() {
    $('html body').css({backgroundColor: '#C41414'});
        $("div .nav li a").click(function(){
            $(".nav .red").removeClass("red");
            $(this).addClass("red");
        });
        $(".nav a").hover(function() {
            $(".nav a").css({background: ''});
            $(this).css({background: '#c41414'});

        }, function() {
            $(".nav a").css({background: ''});
        });
}