javascript - 在 jQuery/JS 切换时定义 "display"css 属性

Question

我正在使用 jQuery 在两个 div 之间切换(我是 jQuery 的新手...)，我希望两个 divs 都使用 显示: flex 属性。我可以将它分配给第一个/默认切换(选项 1)，但第二个切换(选项 2)默认为 display: block，我不确定如何连接到它.

任何见解都会很有帮助 - 谢谢!

这是一个 jsfiddle: http://jsfiddle.net/fZemQ/97/

HTML

<div class="pricing-switcher">
    <a class="toggle active" id="HS-College">High School and College</a>
    <a class="toggle" id="Club-Youth">Club and Youth</a>
</div>

<div class="pricing-wrapper">
    <div class="panels HS-College">Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1</div>
    <div class="panels Club-Youth">Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2</div>
</div>

CSS

.panels {
    display: none;
    padding-bottom: 30px;
}

.panels.HS-College {
    display: flex;
    justify-content: center;
}

.panels.Club-Youth {
    display: flex;
    justify-content: center;
}    

.pricing-switcher {
    float: left;
    width: 100%;
}

.toggle {
    float: left;
    display: block;
    border: 2px solid #000;
    margin-right: 10px;
    cursor: pointer;
}

.toggle.active {
    background-color: red;
}

jQuery

$(document).ready(function() {
    $('.toggle').click(function(){
        var self = $(this);    
        $('.panels').hide();    
        if(self.hasClass('active') ) {
            self.removeClass('active');
            $('.panels.HS-College').fadeIn();
        }else{
            $('.toggle').removeClass('active');
            self.addClass('active');
            $('.panels.'+ self.attr('id')).fadeIn();
        }
    });
});

Answer 1

您没有将 css 分配给其他面板。所以它有默认的 block 显示。

.panels.HS-College, .panels.Club-Youth {
  display: flex;
  justify-content: center;
}

这是更新的 fiddle http://jsfiddle.net/6n0zfdnd/