如何使用目标设置默认选项卡？

【问题标题】：How to set Default tab using target?如何使用目标设置默认选项卡？
【发布时间】：2014-01-27 14:53:39
【问题描述】：

我正在尝试构建一个简单的选项卡式界面，但我陷入了困境。一切正常，除非在加载时似乎无法找到设置默认选项卡的方法。

我想看看页面何时加载，我希望 tab-1 可见。如果不是 jquery，可以使用纯 css 来完成吗

这里是代码。

<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 css-selectors pseudo-class

【解决方案1】：

我不知道你是否可以单独使用 css 来做到这一点，但在 javascript 中你可以使用 window.location.hash 来了解是否指定了哈希，如果没有，它会将你重定向到 #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>

【讨论】：

非常感谢。也许通过纯 css 更优雅的解决方案是通过使用单选按钮，我实现了它并且非常简单。