按下“ctrl”键时，jQuery 选项卡插件未在新的浏览器选项卡中打开

Question

我在我的页面中使用了 Jquery easy tab 插件。

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

我该如何解决这个问题？

我的 jQuery 代码：

$(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;

    });
});

Live page demo

Answer 1

您需要通过维护一些标志来跟踪是否按下了CTRL 键（无论何时按下 CTRL 键，该标志都是真/假。

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;
});

编辑： 您还可以使用e.ctrlKey 来确定@​​987654329@ 密钥状态为Kamlesh Kushwaha 建议。

$("#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，this page。您的标签插件正在阻止重定向。

您可以在 jQuery 选择器中从他们的 href 属性中引用链接，因此您需要添加以下代码从 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"));
   }
});

我已经从您页面上的浏览器控制台测试了这段代码。它的工作:)

Answer 2

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