1

我刚刚使用引导程序创建了一个测试网站，并且我有一个菜单，当您单击或悬停在链接上时，我会在其中获得一些突出显示效果。我用不同颜色的下拉列表更改我的主题。

如果我在主题列表中向下走，一切正常，但如果我转到第二个元素（例如）然后返回第一个元素，则单击突出显示与第二个元素相同。我的意思是，例如，如果第一个li是红色主题，第二个是蓝色，如果我选择蓝色，则单击和悬停突出显示为蓝色，但如果我切换回红色主题，则悬停为红色，但单击/活动突出显示为蓝色的。

我怎样才能解决这个问题？

这是一些代码

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

jQuery

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: ''});
        });
}
4

0 回答 0