在jQuery/JS切换上定义"display“css属性
提问于 2018-02-27 19:59:35
我在两个divs和jQuery之间切换(我是jQuery的新手.)我希望这两个divs都使用display: flex属性。我可以将它分配给第一个/默认切换(选项1)，但是第二个切换(选项2)默认为display: block，我不知道如何连接到它。
任何洞察力都会很有帮助--谢谢！
这里有个小摆设：http://jsfiddle.net/fZemQ/97/
<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();
}
});
});
回答 4
Stack Overflow用户
发布于 2018-02-27 20:17:26
您没有将css分配给另一个面板。所以它有默认的块显示。
.panels.HS-College, .panels.Club-Youth {
display: flex;
justify-content: center;
}以下是更新的http://jsfiddle.net/6n0zfdnd/小提琴
Stack Overflow用户
发布于 2018-02-27 20:16:11
如果这是您要寻找的内容，那么很难说，但是请尝试合并这两条规则：
.panels {
display: none;
padding-bottom: 30px;
}
.panels.HS-College {
display: flex;
justify-content: center;
}变成一条规则：
.panels {
padding-bottom: 30px;
display: flex;
justify-content: center;
}Stack Overflow用户
发布于 2018-02-27 20:19:38
与其使用AddClass和RemoveClass，您只需调用：
.toggleClass()Jquery这里：http://api.jquery.com/toggleclass/
如果存在，它将删除类，如果不存在，则添加类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49021750
复制相关文章
腾讯云开发者
