Слайд к изображению на основе хэша URL или выбора вкладки

Question

Я хочу изменить слайдер на определенный слайд / изображение на основе 2 вещей:

1. URL
2. Вкладка, на которую нажали

Если кто-то зашел на сайт через ../tabs/#contact, то слайдер должен переместиться на второе изображение.

Если кто-то пришел на сайт через ../tabs/#about, то слайдер должен перейти к 1-му изображению.

То же самое должно произойти, если кто-то нажимает на вкладки.

Если кто-то щелкнет по вкладке «О программе», ползунок переместится на 1-й слайд или, если он щелкнет по вкладке «Контакт», перейдет ко 2-му изображению.

По сути, у меня сжатые сроки. Мне нужно знать, делал ли кто-нибудь что-то подобное раньше и какой самый быстрый способ приблизиться к этому!

В прошлом году я написал аналогичный сценарий для загрузки динамического содержимого в зависимости от того, какой был URL-адрес или когда была нажата ссылка с хэш-тегом. Однако у меня нет достаточно времени, чтобы написать такой сложный сценарий для этого проекта! Есть ли простой способ сделать то, что я описал выше!

        //load data when the link is clicked

function loadProfile() {
$('.profileID').each(function() {
        var fp = $(this).html().toLowerCase().replace(/\s/g,"-").replace("\'","") + "-card";
        /*alert(fp);*/
        $.get("ag-cms.php?fakeParameter=" + fp, function(data) {
            var cardID = this.url.replace("ag-cms.php?fakeParameter=", "");
            var card = $("#" + cardID, data).html();
            $(".profileID:not(:has(div)):eq(0)").html(card);
            $(".extraInfo").hide(); 
        });
    });
}

$(document).ready(function(){

$("a").live('click', function() {

var titleTarget = $(this).attr("title");
document.title = 'Albert Goodman - Chartered Accountants - ' + titleTarget;   
$('#loader').html("<strong>Loading</strong> - " + titleTarget);
$('.dynamicContent, .sideBar').fadeOut("fast", function() {
$('#loader').fadeIn("fast");
});

if ($(this).attr("href").indexOf("#") != -1){
var target = $(this).attr("href");      
$('#dynamicContent').load('ag-cms.php ' + target, function() {
$('#loader').hide();
$('.contactInfoBox').load('ag-cms.php #allProfiles p' );    
loadProfile();
});
};

$(window).hashchange();
});});

//load data when page loads

var ahash;
$(window).load(function () {

ahash = location.hash;
$.get('../ag-cms.php?ref='+ahash, function(data) { 

if( $(ahash, data).length == 0 && ahash != "") { 
$('#dynamicContent').load('ag-cms.php #error', function() { 
$('#error #message').append("The link <strong>" + ahash + "</strong> is not valid");
$('#loader').hide();
});}

else if( ahash != ""){ 
$('#dynamicContent').load('ag-cms.php ' + ahash, function() {
$('#loader').hide();
$('.contactInfoBox').load('ag-cms.php #allProfiles p' );
loadProfile();
});
}

else {
$('#dynamicContent').load('ag-cms.php #home', function() {
$('#theNews').load('news.php .titleBrief' );
$('#theEvents').load('events.php .titleBrief' );
$('#loader').hide();
});
};
});
});

Answer 1

Как @Juhana мне интересно, где именно у вас проблемы, и как @Aleks мне также интересно, что вы пробовали до сих пор?

Все, что вам нужно сделать, это проверить хеш при загрузке страницы, если он установлен, и на ваших вкладках есть ссылка, указывающая на хеш, затем щелкните по этой ссылке (используя jQuery click()). Второе, что вам нужно сделать, это сделать так, чтобы при нажатии на вкладку вы также щелкали по ползунковым ссылкам (div.slidecontrolls a).

В основном что-то вроде:

// Get all the tabs
var tabs = jQuery('#wp-tabs-1').find('li a');

// When clicking a tab
tabs.click(function () {
    // Find out which tab was clicked
    var which = tabs.index(this);

    // Click the corresponding link in the slider
    jQuery('div.slidecontrolls').find('a').eq(which).click();
});

// If there's a link in the tabs pointing to the current hash - click it
var hash    = window.location.hash;
var hashTab = tabs.filter('[href="' + hash + '"]');

if (hashTab.length) {
    hashTab.click();
}

Редактировать: так как ваш плагин вкладок заботится о нажатии на соответствующую вкладку, если установлен хэш, вы можете изменить hashTab.click() на jQuery('div.slidecontrolls').find('a').eq(tabs.index(hashTab)).click(), чтобы только щелкнуть ссылку слайдера.

Answer 2

Вы пытались обратиться к рефереру, чтобы получить адрес, с которого вы пришли?document.referrer, что касается вкладок. Я думаю, у вас может быть событие onclick, которое передает идентификатор вкладки и затем выбирает соответствующую часть в ползунке.