大家好,
我只是想问一下,我如何才能在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');
}
});