SlideToggle Jquery:使活动div在网站加载

时间:2017-12-30 21:37:41

标签: javascript jquery html css slidetoggle

我的当前脚本设置如下。它包含三个按钮,所有按钮都在它链接到的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>

0 个答案:

没有答案