Anchor Html + Table

Asked

Viewed 356 times

3

Hello!

Guys, I’m having a problem anchoring HTML within a website.

Anchoring works normally when run on content visible on the site.

The problem is that I would like to anchor a content within a bootstrap "Tab".

For example, I click the icon with the link and it scrolls down the screen + opens the requested content.

What would be the best way to make this type of anchorage?

Thank you for your attention

inserir a descrição da imagem aqui

Example of the code: (Here the anchor is working, because the table was not formed.)

  <div class="row features-panels">
                    <!-- Features Nav-Tabs -->
                    <div class="col-md-12 p-b-md">
                        <ul class="nav nav-tabs nav-justified m-b-md" role="tablist">
                        
                        
                        
                          <li role="presentation" class="active" ><a href="#dental" role="tab" data-toggle="tab" class="text-edit"><img src="images\patrocinado.png" alt="" width="101" height="87" >Links <br>Patrocinados</a></li>
                           
                          <li role="presentation"><a href="#cardiology" role="tab" data-toggle="tab" class="text-edit"><img src="images\facebook.png" alt="">Facebook<br> Ads</a></li>
                            
                            
                            <li>   <a href="#dental" role="tab" >teste4 </a></li>
                         
                            
<li role="presentation"><a href="#eyecare" role="tab" data-toggle="tab" class="text-edit"><img src="images\SEO.png" alt="">SEO para <br>e-commerce</a></li>

                            <li role="presentation"><a href="#neurology" role="tab" data-toggle="tab" class="text-edit"><img src="images/conteudo.png" alt="">Produção de conteudo</a></li>
                            <li role="presentation"><a href="#ent" role="tab" data-toggle="tab" class="text-edit"><img src="images/midias.png" alt="">Gestão de <br>Redes Sociais</a></li>
                            <li role="presentation"><a href="#orthopedics" role="tab" data-toggle="tab" class="text-edit"><img src="images/conver.png" alt="">Design para<br> conversão</a></li>
                        </ul>
                    </div>
                    
                    <!-- Tab Content -->
                    <div class="tab-content">
                    
                    <div role="tabpanel" class="tab-pane fade in active wow fadeIn" id="dental">
                      
                            <div class="content-block content-align-md">
                                <div class="col-md-10 c2 col-md-offset-1 y-middle">
                                    <div class="col-md-6 col-md-push-6">


       
                    
                                    
                                        <h3 id="#dental" class="f-w-900">Links 
Patrocinados</h3>
                                        <h5 class="m-t-md m-b-md">Com planejamento, gestão e otimização, anúncios pagos podem ajudar muito a alavancar seus objetivos na Web.</h5>
                                        <p class="m-b-md">Apenas com SEO seu negócio não vai muito longe na Internet. Agora quando combinado com campanhas pagas, desenvolvidas e gerenciadas de forma inteligente seu negócio pode voar alto. Nosso trabalho é fazer isso acontecer!</p>
                                        <div class="icon-left"> 
                                            <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                            <p class="m-t">Setup de Adwords plenamente alinhado com os objetivos do seu negócio e de acordo com as melhores práticas</p>
                                        </div>
                                        <div class="icon-left"> 
                                            <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                            <p class="m-t">Equalização e sintoma fina para  extrair o máximo de resultados</p>
                                        </div>
                                        <div class="icon-left"> 
                                            <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                            <p class="m-t">Feedback 360º e sugestões de otimizações em landing pages</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-md-pull-6">

                                        <img src="images/modal.jpg" class="img-responsive m-x-auto" alt="">
                                    </div>
                                </div>
                            </div><!-- /End Content Block-->
                        </div><!-- /End of Tab-panel 1 -->
                        
                        
                        

                        <div role="tabpanel" class="tab-pane fade" id="cardiology">
                            <div class="content-block content-align-md">
                                <div class="col-md-10 c2 col-md-offset-1 y-middle">
                                    <div class="col-md-6">
                                        <h3 class="f-w-900">Facebook Ads</h3>
                                        <h5 class="m-t-md m-b-md">Aproxime-se de clientes potenciais, faça-os conhecer de forma sutil a sua marca, seus produtos, prepare-os para consumir.</h5>
                                        <p class="m-b-md">No Facebook, é possível ser cirúrgico na segmentação e atrair o público correto para sua marca e para seus produtos. Mas é preciso atuar de forma estratégica.</p>
                                        <div class="icon-left"> 
                                            <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                            <p class="m-t">Vamos mergulhar no seu negócio para desenhar a melhor forma de atuar</p>
                                        </div>
                                        <div class="icon-left"> 
                                            <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                            <p class="m-t">Construiremos afinidade e engajamento tornando fãs íntimos da sua marca</p>
                                        </div>
                                        <div class="icon-left"> 
                                            <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                            <p class="m-t">Com um crescente exército de fãs faremos sua marca cada vez mais amada</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <img src="images/modal2.jpg" class="img-responsive m-x-auto" alt="">
                                    </div>
                                </div>
                            </div><!-- /End Content Block-->
                        </div><!-- /End of Tab-panel 2 -->

                        <div role="tabpanel" class="tab-pane fade" id="eyecare">
                            <div class="content-block content-align-md">
                                <div class="col-md-10 c2 col-md-offset-1 y-middle">
                                    <div class="col-md-6 col-md-push-6">
                                        <h3 class="f-w-900">SEO para e-commerce</h3>
                                        <h5 class="m-t-md m-b-md">Aumente o número de visitas da sua loja online na busca orgânica,  conquiste mais leads e aumente suas vendas.</h5>
                                        <p class="m-b-md">Acredite, se sua loja online não está bem indexada e posicionada no Google seu custo de aquisição de leads e clientes é muito alto e isso pode inviabilizar seu negócio online a médio prazo. Nós podemos ajudar!</p>
                                        <div class="icon-left"> 
                                            <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                            <p class="m-t">Elaboramos um diagnóstico completo de SEO  em sua loja online</p>
                                        </div>
                                        <div class="icon-left"> 
                                            <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                            <p class="m-t">Identificamos erros, inconsistências e necessidades de otimização</p>
                                        </div>
                                        <div class="icon-left"> 
                                            <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                            <p class="m-t">Planejamos e implementamos soluções customizadas</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-md-pull-6">
                                        <img src="images/model3.jpg" class="img-responsive m-x-auto" alt="">
                                    </div>
                                </div>
                            </div><!-- /End Content Block-->
                        </div><!-- /End of Tab-panel 3 -->

  • Have you tried building the link by passing the tab id? For example "page.html#id_da_tab". This works with Jqueryui, but I have never tested with Bootstrap.

  • @Renatodiniz, I added: http://i.imgur.com/5S5ppPd.png ... But it does not go down and kills the link.

  • The very one Bootstrap Tabs no longer does that?

1 answer

1


If the plugin you are using does not provide the scroll in a smooth way, you can do it manually in jquery. I edited the example you showed to give you a succinct example. For this I used the offset() method to pick up the position of the element for which I have to make the transition and use the method Animate() to scroll the page smoothly.

$(document).ready(function(){
  $("ul.nav li a").click(function(){ //toda vez que clicar em um link na lista da navbar
    let top = $($(this).attr("href")).offset().top; //pego o valor do elemento para qual tenho que rolar
    $('body').animate({scrollTop: top},'500' ,"swing"); //e aqui faço o animate
  });  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row features-panels">
                        <!-- Features Nav-Tabs -->
                        <div class="col-md-12 p-b-md">
                            <ul class="nav nav-tabs nav-justified m-b-md" role="tablist">
                            
                            
                            
                              <li role="presentation" class="active" ><a href="#dental" role="tab" data-toggle="tab" class="text-edit"><img src="images\patrocinado.png" alt="" width="101" height="87" >Links <br>Patrocinados</a></li>
                               
                              <li role="presentation"><a href="#cardiology" role="tab" data-toggle="tab" class="text-edit"><img src="images\facebook.png" alt="">Facebook<br> Ads</a></li>
                                
                                
                                <li>   <a href="#dental" role="tab" >teste4 </a></li>
                             
                                
    <li role="presentation"><a href="#eyecare" role="tab" data-toggle="tab" class="text-edit"><img src="images\SEO.png" alt="">SEO para <br>e-commerce</a></li>

                                <li role="presentation"><a href="#neurology" role="tab" data-toggle="tab" class="text-edit"><img src="images/conteudo.png" alt="">Produção de conteudo</a></li>
                                <li role="presentation"><a href="#ent" role="tab" data-toggle="tab" class="text-edit"><img src="images/midias.png" alt="">Gestão de <br>Redes Sociais</a></li>
                                <li role="presentation"><a href="#orthopedics" role="tab" data-toggle="tab" class="text-edit"><img src="images/conver.png" alt="">Design para<br> conversão</a></li>
                            </ul>
                        </div>
                        
                        <!-- Tab Content -->
                        <div class="tab-content">
                        
                        <div role="tabpanel" class="tab-pane fade in active wow fadeIn" id="dental">
                          
                                <div class="content-block content-align-md">
                                    <div class="col-md-10 c2 col-md-offset-1 y-middle">
                                        <div class="col-md-6 col-md-push-6">


           
                        
                                        
                                            <h3 id="#dental" class="f-w-900">Links 
    Patrocinados</h3>
                                            <h5 class="m-t-md m-b-md">Com planejamento, gestão e otimização, anúncios pagos podem ajudar muito a alavancar seus objetivos na Web.</h5>
                                            <p class="m-b-md">Apenas com SEO seu negócio não vai muito longe na Internet. Agora quando combinado com campanhas pagas, desenvolvidas e gerenciadas de forma inteligente seu negócio pode voar alto. Nosso trabalho é fazer isso acontecer!</p>
                                            <div class="icon-left"> 
                                                <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                                <p class="m-t">Setup de Adwords plenamente alinhado com os objetivos do seu negócio e de acordo com as melhores práticas</p>
                                            </div>
                                            <div class="icon-left"> 
                                                <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                                <p class="m-t">Equalização e sintoma fina para  extrair o máximo de resultados</p>
                                            </div>
                                            <div class="icon-left"> 
                                                <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                                <p class="m-t">Feedback 360º e sugestões de otimizações em landing pages</p>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-md-pull-6">

                                            <img src="images/modal.jpg" class="img-responsive m-x-auto" alt="">
                                        </div>
                                    </div>
                                </div><!-- /End Content Block-->
                            </div><!-- /End of Tab-panel 1 -->
                            
                            
                            

                            <div role="tabpanel" class="tab-pane fade" id="cardiology">
                                <div class="content-block content-align-md">
                                    <div class="col-md-10 c2 col-md-offset-1 y-middle">
                                        <div class="col-md-6">
                                            <h3 class="f-w-900">Facebook Ads</h3>
                                            <h5 class="m-t-md m-b-md">Aproxime-se de clientes potenciais, faça-os conhecer de forma sutil a sua marca, seus produtos, prepare-os para consumir.</h5>
                                            <p class="m-b-md">No Facebook, é possível ser cirúrgico na segmentação e atrair o público correto para sua marca e para seus produtos. Mas é preciso atuar de forma estratégica.</p>
                                            <div class="icon-left"> 
                                                <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                                <p class="m-t">Vamos mergulhar no seu negócio para desenhar a melhor forma de atuar</p>
                                            </div>
                                            <div class="icon-left"> 
                                                <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                                <p class="m-t">Construiremos afinidade e engajamento tornando fãs íntimos da sua marca</p>
                                            </div>
                                            <div class="icon-left"> 
                                                <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                                <p class="m-t">Com um crescente exército de fãs faremos sua marca cada vez mais amada</p>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <img src="images/modal2.jpg" class="img-responsive m-x-auto" alt="">
                                        </div>
                                    </div>
                                </div><!-- /End Content Block-->
                            </div><!-- /End of Tab-panel 2 -->

                            <div role="tabpanel" class="tab-pane fade" id="eyecare">
                                <div class="content-block content-align-md">
                                    <div class="col-md-10 c2 col-md-offset-1 y-middle">
                                        <div class="col-md-6 col-md-push-6">
                                            <h3 class="f-w-900">SEO para e-commerce</h3>
                                            <h5 class="m-t-md m-b-md">Aumente o número de visitas da sua loja online na busca orgânica,  conquiste mais leads e aumente suas vendas.</h5>
                                            <p class="m-b-md">Acredite, se sua loja online não está bem indexada e posicionada no Google seu custo de aquisição de leads e clientes é muito alto e isso pode inviabilizar seu negócio online a médio prazo. Nós podemos ajudar!</p>
                                            <div class="icon-left"> 
                                                <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                                <p class="m-t">Elaboramos um diagnóstico completo de SEO  em sua loja online</p>
                                            </div>
                                            <div class="icon-left"> 
                                                <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                                <p class="m-t">Identificamos erros, inconsistências e necessidades de otimização</p>
                                            </div>
                                            <div class="icon-left"> 
                                                <i class="fa fa-check-circle-o" style="color:#439FE0;"></i>
                                                <p class="m-t">Planejamos e implementamos soluções customizadas</p>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-md-pull-6">
                                            <img src="images/model3.jpg" class="img-responsive m-x-auto" alt="">
                                        </div>
                                    </div>
                                </div><!-- /End Content Block-->
                            </div><!-- /End of Tab-panel 3 -->

Browser other questions tagged

You are not signed in. Login or sign up in order to post.