Question

我有一个包含三个标签的示例页面（tabs.html）。选项卡显示如下：

<ul class="tabs">
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">Tab 1</a></li>
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">Tab 2</a></li>
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">Tab 3</a></li>
</ul>

用于切换标签的JavaScript是：

function tabSwitch(active, number, tab_prefix, content_prefix) {
    for (var i = 1; i < number+1; i++) {  
        document.getElementById(content_prefix+i).style.display = 'none';  
        document.getElementById(tab_prefix+i).className = '';  
    }  
    document.getElementById(content_prefix+active).style.display = 'block';  
    document.getElementById(tab_prefix+active).className = 'selected';      
}

现在，默认情况下，当我链接到tabs.html时，第一个标签设置为活动状态。是否可以从链接到tabs.html的其他网站创建链接并强制第二个或第三个标签处于活动状态？

Answer 1

document.body.onload = function(){
    if (location.hash !== "")
    {
        var page = location.hash.match(/[0-9]/);
        tabSwitch('tab_'+page, 'content_'+page);
    }
}

这应该适用于设置正确的选项卡。然后链接就像http://www.example.com/tabs.html#tab_1

Answer 2

是的，只需将您的选项附加到tabs.html?1等网址，然后检查window.location.search.substr(1)以获取您的标签数量

Answer 3

您可以尝试从tabs.html#tab1这样的哈希中获取要添加的标签。然后在页面onload上运行的代码块执行以下操作：

var hash = window.location.hash;
if (hash == "#tab1")
    tabSwitch('tab_1', 'content_1');
else if (hash == "#tab2")
    tabSwitch('tab_2', 'content_2');
else if (hash == "#tab3")
    tabSwitch('tab_3', 'content_3');

我不知道你是不是自己动手去学习javascript，但是有一个名为jQuery Tabs的jquery插件可以完成你想要做的事情。

链接到JavaScript中的特定选项卡

3 个答案: