I put a jquery and the site enters direct id

Question

I put a jquery and the site enters direct id

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

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

link

How would the site start from the beginning?

jquery css

asked by anonymous 15.12.2017 / 11:25

2 answers

1

They're jumping right because you set the focus on the flip with 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. Focusing elements are often highlighted in some way by the browser, for example, with a dotted line that wraps around 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 very used method for this is trying to add a class to define the active element, eg

$('.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><divstyle="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>

15.12.2017 / 11:37

Store a query attribute in a variable Make screen reader read image alt text

score 1 · Accepted Answer

The problem is the focus event. It makes the screen stay above the item in which it is called by the $ ...
Please try the following:

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