javascript - 如何在 HTML/CSS 中获取标签页的真实地址？

Question

大家好，

我只是想问一下我是否能够在 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

有关如何获取该地址并能够创建指向该地址的链接的任何建议。

谢谢。

Answer 1

你可以尝试使用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');
    }
});