切换面板并添加相应的类

Question

所以我得到了这些面板，它们工作得很好，但是如果我在相同的导航项（标准，加号）上单击两次，该类就会消失……此外，例如，如果我单击“免费” 面板< / strong>，然后单击“标准” 按钮，就不会切换它。。。有什么想法。这是一支钢笔：https://codepen.io/anon/pen/Wyzgmj

$(".pricing-select__item--ent").on('click', function() {

        $(".pricing-panel").removeClass("pricing-panel--selected");

        if($(".pricing-select__item--tms").hasClass("pricing-select__item--selected--color")) {
            $(".pricing-select__item--tms").removeClass("pricing-select__item--selected--color");
            $(this).addClass("pricing-select__item--selected--color");

            $(".pricing-panel--ent").addClass("pricing-panel--selected");
        }
    });

    $(".pricing-select__item--tms").on('click', function() {

        $(".pricing-panel").removeClass("pricing-panel--selected");

        if($(".pricing-select__item--ent").hasClass("pricing-select__item--selected--color")) {
            $(".pricing-select__item--ent").removeClass("pricing-select__item--selected--color");
            $(this).addClass("pricing-select__item--selected--color");

            $(".pricing-panel--tms").addClass("pricing-panel--selected");
        }
    });

    $(".pricing-panel").click(function() {
        $(".pricing-panel").removeClass("pricing-panel--selected");
        $(this).addClass("pricing-panel--selected");

        if($(this).hasClass("pricing-panel--tms")) {
            $(".pricing-select__item--ent").removeClass("pricing-select__item--selected--color");
            $(".pricing-select__item--tms").addClass("pricing-select__item--selected--color");
        }

        if($(this).hasClass("pricing-panel--ent")) {
            $(".pricing-select__item--tms").removeClass("pricing-select__item--selected--color");
            $(".pricing-select__item--ent").addClass("pricing-select__item--selected--color");
        }
    });

Answer 1

只需在您的.pricing-select__item--ent点击功能结束时添加此代码

$(".pricing-panel--ent").addClass("pricing-panel--selected");

只需在.pricing-select__item--tms点击功能的末尾添加此代码

$(".pricing-panel--tms").addClass("pricing-panel--selected");

例如：

 $(".pricing-select__item--ent").on('click', function() {

    $(".pricing-panel").removeClass("pricing-panel--selected");

    if($(".pricing-select__item--tms").hasClass("pricing-select__item--selected--color")) {
        $(".pricing-select__item--tms").removeClass("pricing-select__item--selected--color");
        $(this).addClass("pricing-select__item--selected--color");

        $(".pricing-panel--ent").addClass("pricing-panel--selected");
    }
    $(".pricing-panel--ent").addClass("pricing-panel--selected"); //here
});

$(".pricing-select__item--tms").on('click', function() {

    $(".pricing-panel").removeClass("pricing-panel--selected");

    if($(".pricing-select__item--ent").hasClass("pricing-select__item--selected--color")) {
        $(".pricing-select__item--ent").removeClass("pricing-select__item--selected--color");
        $(this).addClass("pricing-select__item--selected--color");

        $(".pricing-panel--tms").addClass("pricing-panel--selected");
    }
    $(".pricing-panel--tms").addClass("pricing-panel--selected"); //here
});