Создание кнопки, которая переходит в положение страницы div на другой вкладке, но вкладки находятся на той же странице

Question

Так что я своего рода новичок в Laravel, в одном из моих представлений о моем приложении у меня есть несколько вкладок начальной загрузки с содержимым на них.

Я должен сделать кнопку на первой вкладке, которая приведет вас к определенной позиции div на последней вкладке, нигде не могу найти и привести пример.

Я пытался использовать JavaScript, но кнопка ничего не делает, и в консоли Chrome написано:

Не удалось загрузить ресурс: сервер ответил с состоянием 404 (не найдено) 6ImagenAudioVideo: 98 Uncaught ReferenceError: goto не определено в HTMLInputElement.onclick (ImagenAudioVideo: 98)

Ниже мой код.

Вкладки:

<div class="container">
    <div class="card-header">Configurarcion de plantilla imagen, audio, video</div> 

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#insEntorno">Instrucciones de entorno</a></li>
        <li><a data-toggle="tab" href="#lineaB">Linea base</a></li>
        <li><a data-toggle="tab" href="#descansos">Descansos</a></li>
        <li><a data-toggle="tab" href="#fases">Fases</a></li>                                   
    </ul>

    <div class="tab-content ">
       <!-- Some content -->
    </div>
    <!-- More content -->
</div>

После того, как div "tab-content" - это div, куда мне нужно перейти, так что последняя вкладка находится далеко вниз по html.

Простая кнопка:

  <input type="button"  onclick="goto('#imgf1')"  value="Configuracion de instrucciones de entorno "/> 

Js:

function goto(url) {
    window.location = url;
}

Спасибо за помощь!

Answer 1

попробуйте с этим кодом

HTML

    <div class="container">
        <div class="card-header">Configurarcion de plantilla imagen, audio, video</div> 

        <ul class="nav nav-tabs">
            <li class="tablinks active"><a data-toggle="tab" href="#insEntorno">Instrucciones de entorno</a></li>
            <li class="tablinks"><a data-toggle="tab" href="#lineaB">Linea base</a></li>
            <li class="tablinks"><a data-toggle="tab" href="#descansos">Descansos</a></li>
            <li class="tablinks"><a data-toggle="tab" href="#fases">Fases</a></li>                                   
        </ul>

        <div class="tab-content ">
           <!-- Some content -->
        </div>
        <!-- More content -->
    </div>



<input type="button"  onclick="goto('fases')"  value="Configuracion de instrucciones de entorno "/>

и этим сценарием

<script>
function goto(tabId) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabId).style.display = "block";
  tablinks[3].className += " active";
  document.getElementById('yourDivIdHere').scrollIntoView();
}
</script>

защитить индекс "[3]" соответствует таблицеВы можете найти вкладку "# es es indice" 3 лица, которые вы видите " yourDivIdHere ".убедитесь, что индекс "[3]" соответствует вкладке, на которую вы хотите перейти ... в этом случае вкладка #faces соответствует индексу 3, но имейте это в виду, если вы хотите изменить его и заменить " yourDivIdHere"с идентификатором, который вы хотите прокрутить

Answer 2

извините за ответ так поздно, но вот код, который работал для меня!Спасибо всем за помощь :) надеюсь, кто-то найдет это полезным.

Вот код JavaScript:

function goto() {
$('#tbs a[href="#fases"]').tab('show');
document.getElementById('imgf1').scrollIntoView();

}

И html:

<ul id="tbs"class="nav nav-tabs" role="tablist">
                         <li class="nav-item"><a  class="nav-link active" data-toggle="tab" href="#inicio">Inicio</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#insEntorno">Instrucciones de entorno</a></li>
                        <li class="nav-item"><a class="nav-link"  data-toggle="tab" href="#lineaB">Linea base</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#descansos">Descansos</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#fases">Fases</a></li>                                   
                    </ul>

                    <div class="tab-content ">
                         <div id="inicio" class="container tab-pane active">
                                <div id="centrarB">
                                <button class="btn btn-primary" onclick="goto()"> fases </button>

                                </div>
                           </div>

Answer 3

Чтобы открыть новую вкладку, используйте window.open вместо назначения window.location.Я считаю, что URL должен содержать URL-адрес страницы, даже если это та же страница, плюс хэш-тег идентификатора, на который вы хотите перейти.

Кроме того, помните, что если вы делаете это внутриВ коде Javascript вместо простой вкладки привязки с атрибутом target, установленным на новую вкладку, вы рискуете столкнуться с блокировщиками рекламы и блокировщиками всплывающих окон, которые не позволяют вашему приложению функционировать.(Источник: у меня только была эта проблема на прошлой неделе!)