2013-04-15 3 views
2

Я видел варианты этого вопроса, но их спрашивали о более старых версиях jquery или вкладках, которые не были частью jquery ui 1.10.2изменение активной вкладки с помощью URL-адреса в jQuery ui tabs (jquery 1.10.2)

Мой вопрос:
, что JQuery код мне нужно сделать, чтобы добавить к этому, так что
а) селектор активной вкладки будет добавлен в URL (например, если язычки-6 является щелкнул активной вкладки , url, отображаемый в браузере, - page2.html # tabs-6)
b) Я могу создать ссылки, которые изменят вкладку на основе URL-адреса (так что если я сделаю ссылку на странице "page1.html", то точки на "page2.html # tabs-3" "#t abs-3 "станет активной вкладкой?

Я собрал несколько страниц веб-сайта на вкладках jquery ui (используя themerolled jquery UI 1.10), и мне нужно иметь возможность ссылаться на отдельные вкладки из меню на главной странице. Я достаточно опытен с html/css, но мои знания jquery в основном ограничены возможностью реализовать и редактировать демонстрационные примеры.

Для наших целей блок вкладок кода в основном представляет собой загрузочный jquery ui из демонстрации вкладок.

<head> 
<script> 
$(function() { 

    $("#tabs").tabs(); 

    // Hover states on the static widgets 
    $("#dialog-link, #icons li").hover(
     function() { 
      $(this).addClass("ui-state-hover"); 
     }, 
     function() { 
      $(this).removeClass("ui-state-hover"); 
     } 
    ); 
}); 
</script> 
</head> 
<body> 
<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Tab One</a></li> 
    <li><a href="#tabs-2">Tab Two</a></li> 
    <li><a href="#tabs-3">Tab Three</a></li> 
    <li><a href="#tabs-4">Tab Four</a></li> 
    <li><a href="#tabs-5">Tab Five</a></li> 
    <li><a href="#tabs-6">Tab Six</a></li> 
    </ul> 
</div> 
<div id="tabs-1"> 
    <p>tab 1 content</p> 
</div> 
<div id="tabs-2"> 
    <p>tab 2 content</p> 
</div> 
<div id="tabs-3"> 
    <p>tab 3 content</p> 
</div> 
<div id="tabs-4"> 
    <p>tab 4 content</p> 
</div> 
<div id="tabs-5"> 
    <p>tab 5 content</p> 
</div> 
<div id="tabs-6"> 
    <p>tab 6 content</p> 
</div> 
</body> 

ответ

-1

Для (а) - вам придется написать собственный код на событие «выберите», я думаю,

Для (б) - входящие ссылки должны работать нормально, просто использовать tab div ID в качестве фрагмента (но осторожно о Preventing scroll when using URI hash to identify tab)

Смежные вопросы