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

Question

I have using Jquery easy tab plugin in my page.

When I right click on each tab and open it in a new browser tab it will showing up, but when I press ctrl key in keyboard and clicked on tab it will open in same browser tab instead of new browser tab.

How can I solve this?

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;

    });
});

Live page demo

Answer 1

You need to track whether CTRL key is pressed or not by maintaining some flag (which will be true/false whenever CTRL key is pressed.

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

$(document).keyup(function(){
    cntrlIsPressed = false;
});

Now using that cntrlIsPressed flag you can determine your return value:

$("#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;
});

EDIT: You can also use e.ctrlKey to determine CTRL key status as Kamlesh Kushwaha suggested.

$("#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;
});

NOTE: You'l also need to specify taget="_new" for your links as <a target="_new" ...> ... </a>

EDIT: After seeing your page I can see that there isn't ID defined for your tab links, for this page. Your tab plugin is preventing redirection.

You can refer links from their href attribute in jQuery selectory, so you need to add following code open new tab from 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"));
   }
});

This code I've tested from browser console on your page. Its working :)

Answer 2

Use e.ctrlKey . Check it's value, based on the value you can use return false or simply return