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

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

1 个答案: