Question

我是jQuery的新手，想要动态添加一个类。我已经为我的问题阅读了一些解决方案，但我不知道，有什么不对。

所以这是我的代码：我有一个很好的导航栏，并希望以编程方式设置活动类：

HTML

    <div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header"><a class="navbar-brand" href="/"  id="loginLink">D-BAS</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-left">
                <li id="home-hook"><a href="#home-template">Home</a></li>
                <li id="description-hook"><a href="#description-template">Description</a></li>
                <li id="features-hook"><a href="#features-template">Features</a></li>
                <li id="about-hook"><a href="#about-template">About</a></li>
                <li id="research-hook"><a href="#research-template">Research</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li id="contactLinkLi">
                    <a href="${request.application_url}/contact" id="contactLink">
                        <span class="glyphicon glyphicon-comment glyphicon-icon"/>
                        Contact</a>
                </li>
                <li id="loginLinkLi">
                    <a href="${request.application_url}/login" id="loginLink">
                        <span class="glyphicon glyphicon-log-in glyphicon-icon"/>
                        Login </a>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#more">More
                            <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#" class="popup_author_open">
                                <i class="glyphicon glyphicon-user"></i> Author</a>
                        </li>
                        <li>
                            <a href="#" class="popup_licence_open">
                                <i class="glyphicon glyphicon-floppy-disk"></i> Licence</a>
                        </li>
                        <li>
                            <a href="#" class="popup_privacy_open">
                                <i class="glyphicon glyphicon-sunglasses"></i> Privacy Policy</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Language
                            <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#"><img class="language_selector_img_ge" src="${request.static_url('dbas:static/images/germany-flag-16.png')}" alt="flag">Deutsch</a>
                        </li>
                        <li class="active">
                            <a href="#"><img class="language_selector_img_en" src="${request.static_url('dbas:static/images/united-kingdom-flag-16.png')}" alt="flag">English</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

    #custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
    font-weight: bold;
}
#custom-bootstrap-menu.navbar-default {
    font-size: 16px;
    background-color: rgba(0, 106, 179, 1);
    border-width: 1px;
    border-radius: 10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 106, 179, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: rgb(221, 221, 221,1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: rgba(0, 106, 179, 1);
}
.dropdown-menu li a:hover {
    color: #000000;
    font-weight: 700;
}
.nav li a {
    font-size: 15px;
    font-weight: bold;
}
.navbar-nav.navbar-right:last-child {
    margin-right: 20px;
}
.language_selector_img_ge,
.language_selector_img_en {
    padding-right: 10px;
}

的jQuery

// set current file to active
$('#contactLink').click(function () {
    $('.navbar-right li').removeClass('active');
    $(this).addClass('active');
});
$('#loginLink').click(function () {
    $('.navbar-right li').removeClass('active');
    $(this).addClass('active');
});
$('#brandLink').click(function () {
    $('.navbar-right li').removeClass('active');
});

Answer 1

请参阅fiddle

你的jQuery应该改变如下

$(document).ready(function () {
    // set current file to active
    $('#contactLinkLi').click(function () {
        $('.navbar-right li').removeClass('active');
        $(this).addClass('active');
    });
    $('#loginLinkLi').click(function () {
        $('.navbar-right li').removeClass('active');
        $(this).addClass('active');
    });
    $('#brandLink').click(function () {
        $('.navbar-right li').removeClass('active');
    });
});

如您所见，您指定的是$('#contactLink')而不是$('#contactLinkLi')，而$('#loginLinkLi')则类似。

将类添加到list元素

1 个答案:

请参阅fiddle