jQuery tab plugin not opening in a new browser tab when pres

jQuery tab plugin not opening in a new browser tab when press 'ctrl' key

本文关键字：tab new browser pres when in plugin not opening jQuery      更新时间：2023-09-26

我在我的页面中使用Jquery轻松选项卡插件。

当我右键单击每个选项卡并在新的浏览器选项卡中打开它时，它将显示，但是当我按下键盘中的ctrl键并单击选项卡时，它将在相同的浏览器选项卡中打开，而不是新的浏览器选项卡。

我该如何解决这个问题?

my jQuery code:

$(document).ready(function (e) {
    $("html,body").animate({
        scrollTop: 0
    }, 1000);
    var t = window.location.hash.substr(1);
    if (t == "oilngas") {
        $(".offerings_content").hide();
        $("#tab-container").show();
        $("#tabOil").trigger("click");
        window.scrollTo(0, 0);
    } else if (t == "utilities") {
        $(".offerings_content").hide();
        $("#tab-container").show();
        $("#tabUtl").trigger("click");
    } else if (t == "smart") {
        $(".offerings_content").hide();
        $("#tab-container").show();
        $("#tabSmt").trigger("click");
        window.scrollTo(0, 0);
    } else if (t == "heavy") {
        $(".offerings_content").hide();
        $("#tab-container").show();
        $("#tabHvy").trigger("click");
        window.scrollTo(0, 0);
    } else if (t == "") {
        $(".offerings_content").show();
    }
    $("#oil_area").click(function (e) {
        $(".offerings_content").hide();
        $("#tab-container").show();
        $("#tabOil").trigger("click");
        //prijesh
        //var href = $('#tabOil').attr('href');
        //var href = window.location.hash.substr(1);
        //alert("href : " + href);
        //if (href == '#oilngas'){
        //  window.location.href = href; //causes the browser to refresh and load the requested url
        //}

        return false;
    });
    $("#utility_area").click(function (e) {

        $(".offerings_content").hide();
        $("#tab-container").show();
        $("#tabUtl").trigger("click");
        return false;
    });
    $("#smartbldng_area").click(function (e) {
        $(".offerings_content").hide();
        $("#tab-container").show();
        $("#tabSmt").trigger("click");
        return false;
    });
    $("#heavy_area").click(function (e) {
        $(".offerings_content").hide();
        $("#tab-container").show();
        $("#tabHvy").trigger("click");
        return false;
    });
});

实时页面演示

您需要通过维护一些标志来跟踪CTRL键是否被按下(无论何时按CTRL键都将为true/false)。

var cntrlIsPressed=false;
$(document).keydown(function(event){
    if(event.which=="17")
        cntrlIsPressed = true;
});
$(document).keyup(function(){
    cntrlIsPressed = false;
});

现在使用cntrlIsPressed标志，你可以确定你的返回值:

$("#oil_area").click(function (e) {
    $(".offerings_content").hide();
    $("#tab-container").show();
    $("#tabOil").trigger("click");
    if(!cntrlIsPressed)
        return false;
});
$("#utility_area").click(function (e) {
    $(".offerings_content").hide();
    $("#tab-container").show();
    $("#tabUtl").trigger("click");
    if(!cntrlIsPressed)
        return false;
});
$("#smartbldng_area").click(function (e) {
    $(".offerings_content").hide();
    $("#tab-container").show();
    $("#tabSmt").trigger("click");
    if(!cntrlIsPressed)
        return false;
});
$("#heavy_area").click(function (e) {
    $(".offerings_content").hide();
    $("#tab-container").show();
    $("#tabHvy").trigger("click");
    if(!cntrlIsPressed)
        return false;
});
编辑:

您也可以像Kamlesh Kushwaha建议的那样使用e.ctrlKey来确定CTRL的密钥状态。

$("#oil_area").click(function (e) {
    $(".offerings_content").hide();
    $("#tab-container").show();
    $("#tabOil").trigger("click");
    if(!e.ctrlKey)
        return false;
});
$("#utility_area").click(function (e) {
    $(".offerings_content").hide();
    $("#tab-container").show();
    $("#tabUtl").trigger("click");
    if(!e.ctrlKey)
        return false;
});
$("#smartbldng_area").click(function (e) {
    $(".offerings_content").hide();
    $("#tab-container").show();
    $("#tabSmt").trigger("click");
    if(!e.ctrlKey)
        return false;
});
$("#heavy_area").click(function (e) {
    $(".offerings_content").hide();
    $("#tab-container").show();
    $("#tabHvy").trigger("click");
    if(!e.ctrlKey)
        return false;
});

注意:您还需要将taget="_new"指定为<a target="_new" ...> ... </a>

编辑:

看到你的页面后，我可以看到，没有ID定义为您的标签链接，对于这个页面。您的选项卡插件阻止重定向。

你可以从它们的href属性在jQuery选择中引用链接，所以你需要添加以下代码从jQuery打开新选项卡:

$("a[href='#company'], a[href='#founders'], a[href='#team'], a[href='#accolades'], a[href='#careers'], a[href='#philosophy']").click(function(e){
    //determine if control+click or mouse middle button
   if(e.ctrlKey==true || e.which==2){
        window.open($(this).attr("href"));
   }
});

这段代码我已经在你的页面上从浏览器控制台测试过了。

使用e.ctrlKey。检查它的值，根据值你可以使用return false或return

相关文章：