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

Posted 2023-02-25

【中文标题】如何使用外部 URL 或链接打开自定义选项卡及其 div？

【英文标题】：How to open a custom made tab and its div using an external URL or link?

【发布时间】：2019-07-06 00:32:25

【问题描述】：

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

【问题讨论】：

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

是的，只是为了显示和隐藏项目。实际上，它一次只处于活动状态并显示一个选项卡及其内容。 @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-b​​lock').removeClass ('active'); $('.ask-librarian-from').find(selectedTab).addClass('active'); e.preventDefault(); );

绝对可以，而且你的模板已经有了一些支持，但是提供的代码不足以帮助你。我想该代码显示点击工作的标签，对吧？你介意分享一个链接吗？

【参考方案1】：

可以使用jquery的触发方式

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

【参考方案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 的类名。在这里我分享了完整的源代码以供您更好地帮助。

【讨论】：

不错的尝试，但是您的代码太长，无法进行简单的操作。试着让它更短。

【参考方案3】：

这段代码在加载时怎么样？

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