如何在HTML/CSS中获取选项卡页面的真实地址


How to get the real address of tabbed page in HTML/CSS?

大家好,

我只是想问一下,我如何才能在HTML/CSS中的选项卡式表单中获得真正的地址。现在我只能重定向到预设为活动的选项卡。

我的目标是创建一个链接,将我引导到其他选项卡页面。例如,来自其他页面的用户希望创建一个链接,将我引导到选项卡式页面2nd tab

这是我的代码:

<div class="tabs">
<ul class="tab-links">
    <li class="active"><a href="#tab1">All</a></li>
    <li><a href="#tab2">Pending</a></li>
    <li><a href="#tab3">Approved</a></li>
    <li><a href="#tab4">Completed</a></li>
</ul>
<div class="tab-content">
    <div id="tab1" class="tab active">
        <!--Codes here -->
    </div>
    <div id="tab2" class="tab">
        <!--Codes here -->
    </div>
    <div id="tab3" class="tab">
        <!--Codes here -->
    </div>
    <div id="tab4" class="tab">
        <!--Codes here -->
    </div>
    </div>

在地址栏中,即使我点击了其他选项卡,它也只显示这个。请使用这个地址:

/domain/beta/page_home_superadmin.php

但在浏览器的下侧,当我悬停在tab2:时,它显示了这一点

/domain/beta/page_home_superadmin.php#tab2

关于如何获得该地址的任何建议,以及如何创建指向该地址的链接。

谢谢。

您可以尝试使用document.location.hash

<div class="tabs">
<ul class="tab-links">
    <li class="active tab1" id="tab1"><a href="#tab1">All</a></li>
    <li class="tab2"><a href="#tab2">Pending</a></li>
    <li class="tab3"><a href="#tab3">Approved</a></li>
    <li class="tab4"><a href="#tab4">Completed</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
    <!--Codes here -->
</div>
<div id="tab2" class="tab">
    <!--Codes here -->
</div>
<div id="tab3" class="tab">
    <!--Codes here -->
</div>
<div id="tab4" class="tab">
    <!--Codes here -->
</div>
</div>

JavaScript:

$(document).ready(function() {
    if ( document.location.hash ) {
        $('.tab-links > li, div.tab').removeClass('active');
        $('li' + document.location.hash.replace('#', '.') 
          + ', div' + document.location.hash).addClass('active');
    }
});