Как открыть пользовательскую вкладку и ее раздел с помощью внешнего URL или ссылки? - PullRequest
Новая
       13

Как открыть пользовательскую вкладку и ее раздел с помощью внешнего URL или ссылки?

0 голосов
/ 12 февраля 2019 
<section class="ask-librarian-from">
  <div class="container">
    <div class="row split-area">
      <div class="col-md-8">
        <div class="form-block active" id="libtab1">
          <div class="form-title">
            content1
          </div>
        </div>
        <div class="form-block " id="libtab2">
          <div class="form-title">
            content 2
          </div>
        </div>
        <div class="form-block " id="libtab3">
          <div class="form-title">
            content 3
          </div>
        </div>
        <div class="form-block " id="libtab4">
          <div class="form-title">
            content 4
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="tab-wrap mCustomScrollbar">
          <div class="vertical-tabs right-align-tab  scrollContainer" id="verticalTabsScroll" data-mcs-theme="dark">
            <a href="#libtab1" class="tab_item active">
              content tab 1
            </a>
            <a href="#libtab2" class="tab_item ">
              content tab 2 
            </a>
            <a href="#libtab3" class="tab_item ">
              content tab 3
            </a>
            <a href="#libtab4" class="tab_item ">
              content tab 4
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Я просто хочу активировать вкладку, используя URL или ссылку.Именно тогда я захожу на www.mydomain.com / page / # libtab2 , он автоматически открывает и активирует вкладку 'libtab2' и ее содержимое и скрывает все остальные вкладки.

Ответы [ 3 ]

0 голосов
/ 12 февраля 2019 
<section class="ask-librarian-from">
  <div class="container">
    <div class="row split-area">
      <div class="col-md-8">
        <div class="form-block active" id="libtab1">
          <div class="form-title">
            content1
          </div>
        </div>
        <div class="form-block " id="libtab2">
          <div class="form-title">
            content 2
          </div>
        </div>
        <div class="form-block " id="libtab3">
          <div class="form-title">
            content 3
          </div>
        </div>
        <div class="form-block " id="libtab4">
          <div class="form-title">
            content 4
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="tab-wrap mCustomScrollbar">
          <div class="vertical-tabs right-align-tab  scrollContainer" id="verticalTabsScroll" data-mcs-theme="dark">
            <button class="tab_item active" id="tab1" onClick="myFunction(this.id)">
              content tab 1
            </button>
            <button class="tab_item " id="tab2" onClick="myFunction(this.id)">
              content tab 2 
            </button>
            <button class="tab_item " id="tab3" onClick="myFunction(this.id)">
              content tab 3
            </button>
            <button class="tab_item " id="tab4" onClick="myFunction(this.id)">
              content tab 4
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<script>
  function myFunction(clicked_id) {
    var libtab1 = document.getElementById("libtab1");
    var libtab2 = document.getElementById("libtab2");
    var libtab3 = document.getElementById("libtab3");
    var libtab4 = document.getElementById("libtab4");

    if (clicked_id === "tab1") {
      libtab1.style.display = "block";
      document.getElementById("tab1").className = "active";
    } else {
      libtab2.style.display = "none";
      libtab3.style.display = "none";
      libtab4.style.display = "none";
    }
    if (clicked_id === "tab2") {
      libtab2.style.display = "block";
      document.getElementById("tab2").className = "active";
    } else {
      libtab1.style.display = "none";
      libtab3.style.display = "none";
      libtab4.style.display = "none";
    }
    if (clicked_id === "tab3") {
      libtab3.style.display = "block";
      document.getElementById("tab3").className = "active";
    } else {
      libtab1.style.display = "none";
      libtab2.style.display = "none";
      libtab4.style.display = "none";
    }
    if (clicked_id === "tab4") {
      libtab4.style.display = "block";
      document.getElementById("tab4").className = "active";
    } else {
      libtab1.style.display = "none";
      libtab2.style.display = "none";
      libtab3.style.display = "none";
    }
  }
</script>

Вы можете реализовать JavaScript для отображения / скрытия определенного содержимого элемента.Когда вы нажимаете на Tab1, он отображает свойство Tab1 и скрывает содержимое другой вкладки.Также для установки нового класса вы можете использовать это свойство JS "document.getElementById (" put_your_id "). ClassName =" put_your_class_name ";".Он установит имя класса этого конкретного идентификатора.Здесь я поделился полным исходным кодом для вашей лучшей помощи.

0 голосов
/ 12 февраля 2019

Вы можете использовать триггерный метод jquery 

$(document).ready(function() {
        $('a[href]="' + window.location.hash + '"').trigger('click');  
)
0 голосов
/ 12 февраля 2019

Как насчет этого кода при загрузке? 

$(document).ready(function() {
    $('.ask-librarian-from .vertical-tabs a').removeClass('active');
    $('a[href]="' + window.location.hash + '"').addClass('active');
    $('.ask-librarian-from').find('.form-block').removeClass('active');
    $('.ask-librarian-from').find(window.location.hash).addClass('active');
)
...