根据URL哈希或选项卡选择滑动到图像

Question

我想根据两件事情将滑块更改为某个幻灯片/图像：

1. 网址
2. 单击的选项卡

如果有人通过../tabs/#contact访问该网站，则滑块需要滑动到第二个图像。

如果有人通过../tabs/#about来到网站，那么滑块需要滑动到第一张图片。

同样需要发生的是有人点击标签。

如果有人单击“关于”选项卡，滑块将滑动到第一张幻灯片，或者如果他们单击“联系人”选项卡，则会滑动到第二张图像。

基本上，我有一个紧迫的截止日期。我需要知道是否有人之前做过这样的事情，以及最快捷的方法是什么！

去年，我编写了一个类似的脚本，根据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事件，它传递标签ID，然后在滑块中选择适当的部分..