Javascript 定义；“显示”；jQuery/JS切换时的css属性

我正在使用jQuery在两个

div

之间切换（我是jQuery的新手…），我希望两个

div

都使用

display:flex

属性。我可以将其分配给第一个/默认切换（选项1），但第二个切换（选项2）默认为

display:block

，我不知道如何连接到该切换

任何见解都会非常有用-谢谢

下面是一个JSFIDLE：

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>

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();
        }
    });
});

---

如果这是您想要的，则有点难说，但请尝试合并以下两条规则：

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

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

一条规则：

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

---

如果这是您想要的，则有点难说，但请尝试合并以下两条规则：

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

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

一条规则：

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

---

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

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

---

这是更新后的小提琴

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

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

---

这是更新后的小提琴

而不是使用

AddClass

和

RemoveClass

，您只需调用：

.toggleClass()

Jquery-Ref在这里：

---

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

不使用

AddClass

和

RemoveClass

，只需调用：

.toggleClass()

Jquery-Ref在这里：

---

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

我认为这将帮助您解决问题

在CSS文件中，为

Club Youth

div类添加以下属性…将此代码段添加到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;
}

---

我想这会帮助你解决这个问题

在CSS文件中，为

Club Youth

div类添加以下属性…将此代码段添加到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;
}