Можно ли сделать так, чтобы URL загружал для меня вкладку в jquery?

Question

Ниже приведен полный код сценария вкладки jquery AJAX, над которым я работаю.

Мне нужна помощь. Этот скрипт имеет 3 вкладки, каждая из которых загружает страницу с помощью AJAX в DIV.
Мне нужно, чтобы 1 из 3 страниц была «выбрана» и загружена при загрузке страницы.

Если URL-адрес был www.site.com/page.php, он должен загрузить содержимое первой вкладки и выбрать эту вкладку.

Тогда, если я зайду на что-то вроде www.site.com/page.php?t=bulletins или на любой другой метод, но каким-то образом в URL-адресе я могу указать загрузку и выбор другой вкладки при загрузке страницы.

Пример на той же странице Я мог добавить что-то в URL, и когда эта страница вызывалась по ссылке на другой странице, переходившей на эту страницу, вместо вкладки 1 загружалась вкладка 2.

Может кто-нибудь помочь мне добавить это к этому сценарию? Я не хочу использовать jqueryUI, если это возможно.

Так возможно ли это без пользовательского интерфейса jquery?

Также буду признателен за любые улучшения моего текущего кода, я новичок в javascript и jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
// array of pages to load
var pageUrl = new Array();          
pageUrl[1] = "page1.php";
pageUrl[2] = "somepage2.php";
pageUrl[3] = "lastpage3.php";

// function to load page into DIV
function loadTab(id) {
    if (pageUrl[id].length > 0) {
        $("#loading").show();
        $.ajax({
            url: pageUrl[id],
            cache: false,
            success: function (message) {
                $("#tabcontent").empty().append(message);
                $("#loading").hide();
            }
        });
    }
}

$(document).ready(function(){
    $("#loading").hide();
    $("#tab1").click(function(){
        loadTab(1);
        $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
        $(this).addClass('selected');
    });

    $("#tab2").click(function(){
        loadTab(2);
        $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
        $(this).addClass('selected');
    });

    $("#tab3").click(function(){
        loadTab(3);
        $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
        $(this).addClass('selected');
    });
    });
</script>

<div class="HOMEtabdiv">
    <ul class="HOMEtabs">
        <li><a id="tab1" href="#" onClick="return false;" class="selected">All</a></li>
        <li><a id="tab2" href="#" onClick="return false;">Status</a></li>
        <li><a id="tab3" href="#" onClick="return false;">Bulletins</a></li>
    </ul> 
</div>
<div id="loading"> 
    <img src="images/loading.gif">
</div> 
<div id="tabcontent"> 
Tab Content loads pages into here
</div>

<style type="text/css">
a:active { outline:none;}
:focus {  -moz-outline-style:none;}
/* root element for tabs  */
ul.HOMEtabs {  
    margin:0 !important; 
    padding:0;
    height:30px;
    border-bottom:1px solid #666;       
}
/* single tab */
ul.HOMEtabs li {  
    float:left;  
    padding:0; 
    margin:0;  
    list-style-type:none;   
}
ul.HOMEtabs a { 
    float:left;
    font-size:13px;
    display:block;
    padding:5px 30px;   
    text-decoration:none;
    border:1px solid #666;  
    border-bottom:0px;
    height:18px;
    background-color:#efefef;
    color:#777;
    margin-right:2px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright:4px;
    position:relative;
    top:1px;    
}
ul.HOMEtabs a:hover {
    background-color:#FFFFFF;
    color:#333;
}
/* selected tab */
ul.HOMEtabs a.selected {
    background-color:#FFFFFF;
    border-bottom:2px solid #FFFFFF;    
    color:#000; 
    cursor:default;
}
</style>

Answer 1

Я бы загружал содержимое div сразу после загрузки страницы, предполагая, что они не очень тяжелые. Что касается автоматического выбора первой вкладки, то это должно быть сделано с помощью CSS, так что это сразу видно при загрузке страницы. Если вы хотите сделать это программно, я бы предложил что-то простое:

$("div.tabs:first").trigger("click");

Что вызовет событие click для этой вкладки и, следовательно, покажет его содержимое.

Чтобы определить, какая вкладка должна быть выбрана при загрузке страницы, вы должны использовать хэш-атрибут URL.

alert(window.location.hash);

Это предупредит "проекты", если вы посетите www.somesite.com/index.html#projects. Самое замечательное в использовании хэш-ссылки - это то, как она ведет себя естественным образом, прокручивая содержимое ключа в поле зрения, когда CSS недоступен.

Из этого значения (если оно присутствует) определите, на какой вкладке вызывать щелчок при загрузке страницы. Этого должно быть достаточно, чтобы вы катились в правильном направлении. Если у вас есть более конкретные вопросы, не стесняйтесь задавать их, и мы будем рады помочь вам в максимально возможной степени.