如何使用外部URL或链接打开自定义选项卡及其div？

Question

<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”选项卡及其内容，并隐藏所有其他选项卡的内容。

Answer 1

加载这段代码怎么样？

$(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');
)

Answer 2

<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“;”。它将设置该特定ID的类名。在这里，我分享了完整的源代码以获得更好的帮助。

Answer 3

您可以使用jquery的触发器方法

$(document).ready(function() {
        $('a[href]="' + window.location.hash + '"').trigger('click');  
)