Имитировать клик с параметром URL

Question

В настоящее время я работаю над страницей, содержащей 4 разных вкладки, анимированных/toggleable с Javascript.

Я хотел бы иметь возможность привязывать эти вкладки, чтобы получить доступ к выбранной вкладке в зависимости от параметра URL.

Однако единственный способ переключиться с одной вкладки на другую - это нажать на нее.

Поэтому я предполагаю, что простым способом было бы установить 4 разных URL-адреса страницы. Например.

pagename.com#1 
pagename.com#2 
pagename.com#3 
pagename.com#4 

С каждым номером, имитирующего щелчок на вкладке 1 до 4.

Могу ли я достичь что-то вроде этого?

Большое спасибо, Геральт

Answer 1

В ответ выше состояний, вы можете изменить хэш с помощью window.location.hash. Но если ваши вкладки не привязаны к этой функциональности, активная вкладка не изменится, просто добавив/изменив хэш. То, что вы должны сделать, это в вашем JavaScript смотреть на текущий хэш и определить, какие соответствующие вкладки/панели для отображения ... Проверьте этот пример:

HTML:

<div id="tabs"> 
    <div><a href="#1">Tab 1</a></div> 
    <div><a href="#2">Tab 2</a></div> 
    <div><a href="#3">Tab 3</a></div> 
    <div><a href="#4">Tab 4</a></div> 
</div> 

<div id="panels"> 
    <div id="1">I am a panel 1</div> 
    <div id="2">I am a panel 2</div> 
    <div id="3">I am a panel 3</div> 
    <div id="4">I am a panel 4</div> 
</div> 

CSS:

#tabs > div { 
    display: inline-block; 
} 

#panels > div { 
    display: none; 
} 

JS:

$(document).ready(function() { 
    // if you want the first one shown... 
    window.location.hash = '#1'; 
    // initially check... 
    var h = window.location.hash; 
    var panel = findPanel(h); 
    if (panel) { 
     panelCleanUp() 
     $(panel).show(); 
    } 

    $('#tabs').on('click', 'a', function() { 
     setTimeout(function() { // let the hash update... 
      var hasher = window.location.hash; 
      var panel = findPanel(hasher); 
      if (panel) { 
       panelCleanUp(); 
       $(panel).show(); 
      } 
     }, 0); 
    }); 
}); 


function findPanel(hasher) { 
    return $('#panels ' + hasher)[0]; 
} 

function panelCleanUp() { 
    $('#panels > div').each(function() { 
     $(this).hide(); 
    }); 
} 

See the Fiddle

Answer 2

Да! Используйте window.location.hash

window.location.hash = "1"; // done!