如何使用目标设置默认选项卡? [英] How to set Default tab using target?
本文介绍了如何使用目标设置默认选项卡?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图构建一个简单的选项卡式界面,但我陷入了停滞.一切正常,除了加载时似乎找不到设置默认选项卡的方法.
i am trying to build a simple tabbed interface and i am stalled. All works fine except, when cant seem to find a way to set default tab when loaded.
我想看看页面何时加载,我希望tab-1可见.如果不是jquery,可以使用纯CSS完成
I would like to see when page loads, i want the tab-1 to be visible. Can it be done using pure css, if not for jquery
这是代码.
<div class='tabs'>
<ul class='horizontal'>
<li><a href="#tab-1">General</a></li>
<li><a href="#tab-2">Showcase Box</a></li>
</ul>
<div id='tab-1' class="tab"> Tab1 Content here </div> <div id='tab-1' class="tab"> Tab 2 Content here </div>
CSS
.tabs div:not(:target) { display:none; }
.tabs div:target { display:block; }
推荐答案
我不知道您是否可以单独使用CSS来执行此操作,但是在javascript中,您可以使用window.location.hash
来了解是否指定了哈希(如果未指定)它会将您重定向到#tab-1.
I dont know if you could do this with css alone, but in javascript you can use window.location.hash
to know if a hash is specified or not, if not it will redirect you to #tab-1.
尝试一下:
<style>
.tabs div:not(:target) { display:none; }
.tabs div:target { display:block; }
</style>
<div class='tabs'>
<ul class='horizontal'>
<li><a href="#tab-1">General</a></li>
<li><a href="#tab-2">Showcase Box</a></li>
</ul>
<div id='tab-1' class="tab"> Tab1 Content here </div>
<div id='tab-2' class="tab"> Tab 2 Content here </div>
</div>
<script>
(function(){
if (window.location.hash) {
window.location.hash;
} else {
window.location.hash = '#tab-1';
};
})();
</script>
这篇关于如何使用目标设置默认选项卡?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文