大家好,
我只是想问一下我是否能够在 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');
}
});
关于javascript - 如何在 HTML/CSS 中获取标签页的真实地址?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25859472/