Question

我在this fiddle中有此菜单，我想在点击时设置有效div：

<div class="account-item">
    <div class="account-heading active">
        <h4 class="account-title">
            <a href="#/Transactions">2. TRANSACTION_HISTORY</a>
        </h4>
    </div>
</div>

我有这个脚本，但我选择了所有div

function SetActiveDiv()
{
    var element = $("a").parent().parent();
    if (element.hasClass("active")) {
        element.removeClass("active");
    } else {
        element.addClass("active");
    }
}

Answer 1

您需要传递点击的元素参考

 <a href="#/Tickets" onclick="SetActiveDiv(this);">1.MY_TICKETS</a>

然后

function SetActiveDiv(el) {

    var element = $(el).closest('.account-heading');
    element.toggleClass("active");
}

演示：Fiddle

注意：由于您使用的是jQuery，请尝试使用jQuery事件处理程序而不是内联处理程序

所以

<a href="#/Tickets">1.MY_TICKETS</a>

然后

jQuery(function ($) {
    $('.account-group .account-title a').click(function () {
        var $heading = $(this).closest('.account-heading').toggleClass("active");
        $('.account-group .account-heading.active').not($heading).removeClass('active');
    })
})

演示：Fiddle

Answer 2

删除html onclick="SetActiveLink('#/*')"中的所有函数，然后使用此jQuery函数，这样就不会重复：

$(".account-group a").on("click", function(){
    $(".account-group a").removeClass("active");
    $(this).addClass("active");
});

在此处查看结果：

＆＃13;

$(".account-group a").on("click", function(){
    $(".account-group a").removeClass("active");
    $(this).addClass("active");
});

＆＃13;

.active {
    color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 col-md-3 left-sidebar-container">
    <div class="left-sidebar">
        <div class="account">
            <h1>MY_ACCOUNT</h1>
            <div class="account-group" id="accordion">
                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title">
                            <a href="#/Tickets">1.MY_TICKETS</a>
                        </h4>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title">
                            <a href="#/Transactions">2. TRANSACTION_HISTORY</a>
                        </h4>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title">
                            <a href="#">3. PAYIN</a>
                        </h4>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title">
                            <a href="#">4.PAYOUT</a>
                        </h4>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading active">
                        <h4 class="account-title has-sub">
                            <a data-toggle="collapse" data-parent="#accordion" href="#settings">5.SETTINGS</a>
                        </h4>
                    </div>
                    <div id="settings" class="account-collapse collapse in">
                        <div class="account-body">
                            <a href="#/PersonalInfo" class="active-link">PERSONAL_INFORMATION</a>
                            <a href="#/Notifications">NOTIFICATIONS</a>
                            <a href="#/PasswordChange">CHANGE_PASSWORD</a>
                            <a href="#">GAME_SETTINGS</a>
                        </div>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title has-sub">
                            <a data-toggle="collapse" data-parent="#accordion" href="#promotions">6.PROMOTIONS</a>
                        </h4>
                    </div>
                    <div id="promotions" class="account-collapse collapse">
                        <div class="account-body">
                            <a href="#">BONUSES</a>
                            <a href="#">COMPETITIONS</a>
                            <a href="#">VOUCHER_REDEEM</a>
                        </div>
                    </div>
                </div>

                <div class="account-item">
                    <div class="account-heading">
                        <h4 class="account-title">
                            <a href="#">7. SYSTEM_MESSAGES</a>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 3

只需使选择器看起来像（双类选择器）：

var element = $(".account-heading.active");

Answer 4

您需要查看代码并了解它的作用。请按以下一行：

$("a").parent().parent();

这是做什么的？它选择每个锚点，然后选择父项，然后选择该父项的父项。

考虑到您正在使用jQuery，您可以使用它来绑定事件处理程序，而不是在您的html中使用onClick（这是考虑不好的做法）。

$('a').on('click', function() {
   $('.account-heading').removeClass('active');
   $(this).parent().parent().addClass('active');
});

jsFiddle：http://fiddle.jshell.net/jxmbj36s/5/

Answer 5

我认为以下代码将帮助您解决此问题

function SetActiveDiv() {
   var el = $("a").closest("div.account-heading")[0];
   var el = $("a").parent().parent();
   if ($(el).hasClass('active')) {
     $(el).removeClass('active')
   } else {
     $(el).addClass('active')
   }
 }

如何将类设置为div？

5 个答案: