Php 如何使用外部URL或链接打开自定义选项卡及其div？ 内容1 内容2 内容3 内容4

我只想使用URL或链接激活选项卡。当我进入www.mydomain.com/page/#libtab2时，它会自动打开并激活“libtab2”选项卡及其内容，并隐藏所有其他选项卡的内容。

这段代码如何加载

<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>

内容1
内容2
内容3
内容4
内容选项卡1
内容选项卡2
内容选项卡3
内容选项卡4
函数myFunction（单击\u id）{
var libtab1=document.getElementById（“libtab1”）；
var libtab2=document.getElementById（“libtab2”）；
var libtab3=document.getElementById（“libtab3”）；
var libtab4=document.getElementById（“libtab4”）；
如果（单击了_id==“tab1”）{
libtab1.style.display=“块”；
document.getElementById（“tab1”）.className=“活动”；
}否则{
libtab2.style.display=“无”；
libtab3.style.display=“无”；
libtab4.style.display=“无”；
}
如果（单击了_id==“tab2”）{
libtab2.style.display=“block”；
document.getElementById（“tab2”）.className=“活动”；
}否则{
libtab1.style.display=“无”；
libtab3.style.display=“无”；
libtab4.style.display=“无”；
}
如果（单击了_id==“tab3”）{
libtab3.style.display=“block”；
document.getElementById（“tab3”）.className=“活动”；
}否则{
libtab1.style.display=“无”；
libtab2.style.display=“无”；
libtab4.style.display=“无”；
}
如果（单击了_id==“tab4”）{
libtab4.style.display=“block”；
document.getElementById（“tab4”）.className=“活动”；
}否则{
libtab1.style.display=“无”；
libtab2.style.display=“无”；
libtab3.style.display=“无”；
}
}

---

您可以实现JavaScript来显示/隐藏项目的特定内容。单击Tab1时，它将显示Tab1的属性并隐藏另一个选项卡的内容。另外，对于设置新类，您可以使用这个JS属性“document.getElementById（“put_your_id”）.className=“put_your_class_name”；”。它将设置该特定ID的类名。为了更好地帮助您，我在这里共享了完整的源代码。

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

<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>

---

锚定应使用锚定标记上的

#libtab2

工作。你是否应用了javascript来显示该选项卡？是的，只是为了显示和隐藏项目。实际上，它一次只激活一个选项卡并显示其内容@tshimkus$（'.ask library from.vertical tabs a'）。单击（函数（e）{var selectedTab=$（this）.attr（'href'）；$（'.ask library from.vertical tabs a'）。removeClass（'active'）；$（this）.addClass（'active'）；$（'.ask library from'）。查找（'.form block'）。removeClass（'active'）；$）。ask library from'）。查找（selectedTab.addClass（'active'）；e.preventDefault（）；}）；这是绝对可以做到的，而且你的模板已经有了一些支持，但是提供的代码对你的帮助还不够。我想在单击时显示选项卡的代码可以工作，对吗？你介意共享一个链接吗？很好的尝试，但是你的代码太长，无法进行简单的操作。请尝试将其缩短。

<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>

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