Question

我在两个divs之间用jQuery切换（我是jQuery的新手......），我希望两个divs都使用display: 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分配给其他面板。所以它有默认的块显示。

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

这里是更新的小提琴http://jsfiddle.net/6n0zfdnd/

Answer 2

如果这是你正在寻找的，有点难以说，但尝试合并这两个规则：

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

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

成一条规则：

.panels {
    padding-bottom: 30px;
    display: flex;
    justify-content: center;
}

Answer 3

您可以直接致电：

，而不是使用AddClass和RemoveClass

.toggleClass()

Jquery Ref： http://api.jquery.com/toggleclass/

如果存在则删除该类，如果不存在则添加。

Answer 4

我认为这有助于您解决问题...

在您的CSS文件中为Club-Youth div class添加以下属性也...将此代码段添加到您的CSS中。

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

结果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: flex;
    border: 2px solid #000;
    margin-right: 10px;
    cursor: pointer;
}

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

在jQuery / JS切换时定义“display”css属性

4 个答案: