jQuery队列序列选项卡

Question

请修复jQuery脚本。正确的过程

1）单击获取选项卡2和按钮 2）转到标签2 3）滚动到灰色段落

我很抱歉我的英语不好，非常感谢你

https://jsfiddle.net/rnL46L5f/2/

    //Navigation Item    
$(".getTwoTab").click(function(){
  var activeTab = getIndex();

  if ( activeTab == 1) {

    $('html, body').animate({
        scrollTop: $('#grayparagraph').offset().top
    }, 500); 

  } else {

    //Step 1
    $( "#tabs" ).queue(function() {    
      $( "#tabs" ).tabs( "option", "active", 1 );
      $(this).dequeue();
    })
            //Step 2
    $('html, body').animate({
        scrollTop: $('#grayparagraph').offset().top
    }, 500);
    $(this).dequeue();

  } 
});

卢卡斯

Answer 1

您需要收听tabsactivate事件标签，然后滚动到顶部

https://jsfiddle.net/9n7vugr8/

＆＃13;

＆＃13;

    //Tabs
    $(function() {
      $('#tabs').tabs({
        hide: 'fade', 
        show: 'fade',
        active: 0
      });
    });
    
   $( "#tabs" ).on( "tabsactivate", function( event, ui ) {
   var activeTab = getIndex();
      
      if ( activeTab == 1 && $('#tabs').hasClass('external')) {
   	 $('html, body').animate({
            scrollTop: $('#grayparagraph').offset().top
        }, 500); 
   }
   } );
    
     // Return Active Tab Number
    function getIndex(){
     return $("ul li.ui-state-active").index();
    }       
   
    //Navigation Item    
    $(".getTwoTab").click(function(){
      var activeTab = getIndex();
      
      if ( activeTab == 1) {
      
        $('html, body').animate({
            scrollTop: $('#grayparagraph').offset().top
        }, 500); 
        
      } else {
      
        //Step 1
        $( "#tabs" ).queue(function() {    
          $( "#tabs" ).tabs( "option", "active", 1 );
          $(this).dequeue();
          $( "#tabs" ).addClass("external");
        })
        
      } 
    });
    
   $("#tabs a").click(function(){
   	$( "#tabs" ).removeClass("external");
   
   })
  

＆＃13;

body{
  height:700px;
}
.getTwoTab{
 display:inline-block;
 padding:10px;
 background:blue;
 color:#fff; 
 cursor:pointer;
}
.ui-tabs-nav li{
  display:inline-block;
  padding:3px 5px;
  background:#dcdcdc;
  color:#fff;
}
.ui-tabs-nav li.ui-state-active{
  background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<span class="getTwoTab">Get Tab 2 and  button</span>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>1</p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the         industry's standard dummy text ever since the 1500s
    </p>
  </div>
  <div id="tabs-2">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the         industry's standard dummy text ever since the 1500s
    </p>
    <p id="grayparagraph" style="padding:10px 15px; background:#dcdcdc">
    Gray paragraph
    </p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </p>
  </div>
  <div id="tabs-3">
    <p>3.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;