I place a jquery and the site enters direct id

Question

I have this script with css and jQuery of different color tabs, when I include the line:

To leave the first tab open.

$(document).ready(function(){
       $('.abas:first').trigger('click').focus();
    });

The site starts in the class .abas, and not from the beginning, as you can see here

https://jsfiddle.net/x9rtxsv5/9/

How would the site start from the beginning?

Answer 1

They’re jumping right in because you focus on the tab with the focus()

$('.abas:first').trigger('click').focus();
$('.abas:first').trigger('click'); // Dessa forma não ficaria selecionado de largada

The Focus event is sent to an element when it gains focus. Focus elements are usually highlighted in some way by the browser, for example, with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events, such as an email field on a login screen for example.

A widely used method for this which is trying, is the addition of a class to define the active element, example:

$('.abas').on('click', function(){
   $('.abas').removeClass('active'); // linha adicionada
   $(this).addClass('active');  // linha adicionada
   aba_index = $(this).attr('tabindex');

   this.aba1 = {
      conteudo: '<div class="conteudo_abas">dsad</div>'
   }

   this.aba2 = {
      conteudo: '<div class="conteudo_abas">asdsad</div>'
   }

   this.aba3 = {
      conteudo: '<div class="conteudo_abas">zxczx czxc zx</div>'
   }

   this.aba4 = {
      conteudo: '<div class="conteudo_abas">dffxg f</div>'
   }

   this.aba5 = {
      conteudo: '<div class="conteudo_abas"> sdfdsf </div>'
   }

	 return $('#texto').html(this['aba' + aba_index]['conteudo']);
});

$(document).ready(function(){
   $('.abas:first').trigger('click').addClass('active'); // linha atualizada focus - addClass
   
});

.conteudo_abas{
  border:1px solid #000;  
}
.abas{
   display: inline-block;
   height: 40px;
   line-height: 40px;
   padding: 0 15px;
   text-align: center;
   border-bottom: 3px solid #ddd;
   float: left;
   cursor: pointer;
   outline: none;
}

.abas:hover,
.abas:focus, .abas.active{
   color: #fff;
}

.abas:nth-child(1){
   border-bottom-color: orange;
}
   .abas:nth-child(1):hover,
   .abas:nth-child(1).active{
      background: orange;
   }

.abas:nth-child(2){
   border-bottom-color: red;
}
   .abas:nth-child(2):hover,
   .abas:nth-child(2).active {
      background: red;
   }

.abas:nth-child(3){
   border-bottom-color: purple;
}
   .abas:nth-child(3):hover,
   .abas:nth-child(3).active{
      background: purple;
   }

.abas:nth-child(4){
   border-bottom-color: blue;
}
   .abas:nth-child(4):hover,
   .abas:nth-child(4).active{
      background: blue;
   }

.abas:nth-child(5){
   border-bottom-color: green;
}
   .abas:nth-child(5):hover,
   .abas:nth-child(5).active{
      background: green;
   }

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div style="margin-top:1000px;">
</div>
<div class="abas abas1" tabindex="1">
   Aba 1
</div>
<div class="abas abas2" tabindex="2">
   Aba 2
</div>
<div class="abas abas3" tabindex="3">
   Aba 3
</div>
<div class="abas abas4" tabindex="4">
   Aba 4
</div>
<div class="abas abas5" tabindex="5">
   Aba 5
</div>
<br clear="all" /><br />
<div id="texto"></div>

Answer 2

The problem is the Focus event.
It causes the screen to be on top of the item in which it is called by $...
Try it this way:

$(document).ready(function(){   
    var position = $(window).scrollTop();
    $('.abas:first').trigger('click').focus();
    $(window).scrollTop(position);
});