如何直接链接到我的一个JQuery选项卡?

时间:2013-04-03 23:51:39

标签: jquery

我的网页 https://tornhq.com/WorkingOn/InteractiveMap/implementing.html

我想知道,是否可以直接链接到我页面上的某个标签页。例如,如果您单击加拿大图像,它将加载该图像的内容,该图像将用于以后的使用和诸如此类的东西。是否可以输入URL直接执行此操作?

就像你可以进入谷歌地图一样,环顾四周,然后获得你现在所看到的直接链接?

示例:

https://tornhq.com/WorkingOn/InteractiveMap/implementing.html#Current

将带您进入侧边菜单的“当前”选项卡,但目前还没有,但这是我希望能够做到的。

最诚挚的问候, 添

修改

另一个内部的标签切换器:http://jsfiddle.net/3N4n2/

JQuery:

$('#tab-wrapper li:first').addClass('active');
$('#maps-slider li:first').addClass('active');
$('#tab-body > div').hide();
$('#Current > div').hide();
$('#tab-body > div:first').show();
$('#Current > div:first').show();

$('#tab-wrapper a').click(function() {
    $('#tab-wrapper li').removeClass('active');
    $(this).parent().addClass('active');
    var activeTab = $(this).attr('href');
    $('#tab-body > div:visible').hide();
    $(activeTab).show();
    return false;
});

$('#maps-slider a').click(function() {
    $('#maps-slider li').removeClass('active');
    $('#tab-wrapper li').removeClass('active');
    $(this).parent().addClass('active');
    $('#tab-wrapper #Current-Tab').addClass('active');
    var activeTab = $(this).attr('href');
    $('#Current > div:visible').hide();
    $('#tab-body > div:visible').hide();
    $('#Current > div:first').hide();
    $(activeTab).show();
    $('#tab-body > #Current').show();
    return false;
});

更新

我已经更新了我的实时版本,我现在正在使用它。使用的代码如下:

// Parse URL Queries Method
(function($){
    $.getQuery = function( query ) {
        query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var expr = "[\\?&]"+query+"=([^&#]*)";
        var regex = new RegExp( expr );
        var results = regex.exec( window.location.href );
        if( results !== null ) {
            return results[1];
            return decodeURIComponent(results[1].replace(/\+/g, " "));
        } else {
            return false;
        }
    };
})(jQuery);

// Document load
$(function(){
    var test_query = $.getQuery('test');
    alert(test_query); // For the URL http://YOUR DOMAIN/index.html?test=yes, the value would be "yes"
});

1 个答案:

答案 0 :(得分:0)

您只需要在网址中添加一个变量并解析它 示例链接:https://tornhq.com/WorkingOn/InteractiveMap/implementing.html?tab=1

function getUrlVars() {
    var vars = {};
    // parse URL for variables
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(m,key,value) {
        vars[key] = value;
    });
    // return an object with keys of names of the variables and associated values 
    // The returned object with the example URL is equivalent to vars = {tab:1};
    return vars;
}
// assign individual variables to the key values
var myTAB = getUrlVars()["tab"];
// just set the active variable in your jquery tab declaration = myTAB or update my generic selector to your own to set it afterwards...
if(myTAB) { $( ".selector" ).tabs( "option", "active", myTAB); }