Ссылка на конкретную вкладку в JavaScript

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#tab1. Затем в блоке кода, который запускается на странице загрузки, сделайте что-то вроде этого:

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 с именем jQuery Tabs , который делает именно то, что вы пытаетесь сделать.

Answer 3

да просто добавьте свои параметры к URL-адресу, например tabs.html?1, а затем проверьте window.location.search.substr(1) для загрузки номера табуляции