我的当前脚本设置如下。它包含三个按钮,所有按钮都在它链接到的div上切换一个SlideToggle。打开的div获得一个活跃的类,通过使按钮完全变为橙色使其脱颖而出。
可以看出,当'网站'加载时,Testdiv 2就会打开。我想要实现的是在脚本加载时使按钮2完全变为橙色,并在选择另一个div时使其失去活动类,就像我执行其他按钮切换时所发生的那样。如何确保此按钮以橙色按钮开始,之后将包含在活动效果中。
提前致谢!
FIDDLE:https://jsfiddle.net/Lryqt6ou/1/
jQuery(document).ready(function( $ ){
//Start of Jquery
$('#button1').click(function(){
if ($('.product').css('display') === 'none') {
$('.product').slideToggle('slow');
}
$('.developers').slideUp();
$('.lockedin').slideUp();
});
$('#button2').click(function(){
if ($('.lockedin').css('display') === 'none') {
$('.lockedin').slideToggle('slow');
}
$('.product').slideUp();
$('.developers').slideUp();
});
$('#button3').click(function(){
if ($('.developers').css('display') === 'none') {
$('.developers').slideToggle('slow');
}
$('.product').slideUp();
$('.lockedin').slideUp();
});
$(function() {
$( '.oval' ).on( 'click', function() {
$( this ).parent().find( '.oval.active' ).removeClass( 'active' );
$( this ).addClass( 'active' );
});
});
// End of Jquery
});
.oval {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 120px;
height: 30px;
border: 3px solid #fa8d37;
-webkit-border-radius: 50%;
border-radius: 50%;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
text-indent: 2px;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
text-align: center;
padding-top: 15px;
background: #ffffff;
text-transform: uppercase:
}
.oval:hover {
background: #fa8d37;
}
.oval.active {
background: #fa8d37;
text-transform: uppercase:
}
.product {
display:none;
color: black;
}
.lockedin {
color:black;
}
.product_active{
display:none;
}
.developers {
display:none;
color:black;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="oval" id="button1">BUTTON 1</div>
<div class="oval" id="button2"> BUTTON 2</div>
<div class="oval" id="button3">BUTTON 3</div>
<div class="product">
Testdiv1
</div>
<div class= "lockedin">
Testdiv2
</div>
<div class = "developers">
Testdiv3
</div>