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

- Vimal Roy

---

锚定应该使用锚标签上的#libtab2。您是否应用了任何JavaScript来显示该选项卡？ - tshimkus

是的，只是为了显示和隐藏项目。实际上，它一次只激活并显示一个选项卡及其内容。@tshimkus$('.ask-librarian-from .vertical-tabs a').click( function(e){ var selectedTab = $(this).attr('href'); $('.ask-librarian-from .vertical-tabs a').removeClass('active'); $(this).addClass('active'); $('.ask-librarian-from').find('.form-block').removeClass('active'); $('.ask-librarian-from').find(selectedTab).addClass('active'); e.preventDefault();}); - Vimal Roy

这绝对是可以做到的，而且您的模板已经有了一些支持，但提供的代码不足以帮助您。我想象一下，点击选项卡时显示选项卡的代码是有效的，对吗？您能分享一个链接吗？ - tshimkus

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

- Cerlin

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的类名。在这里，我分享了完整的源代码以帮助您更好地理解。

- Makdia Hussain

---

不错的尝试，但是你的代码对于一个简单的操作来说太长了。尝试让它更短一些。 - Code_Ninja

Answer 3

你可以使用jQuery的trigger方法

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

- ajay Sharavat