如何禁用该选项:在新选项卡中打开

时间:2014-10-13 10:34:30

标签: javascript jquery html browser

如何禁用该选项:在新标签页中打开

我异步加载内容负责下面的代码:

jQuery的:

$(document).ready(function()
{
    init();
    $(window).resize(init);

    $('#floatMenu,#smallMenu').find('>a').click(function()
    {
        var t = this;
        $('#wynik').animate({opacity:0}, 'fast', function()
        {
            $(this).load(t.href, function()
            {
                $(this).animate({opacity:1}, 'fast');
            })
        });

        //$('#wynik').load(this.href);

        $(this).addClass('active').siblings().removeClass('active');

    }).first().click();
});

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="list-group" id="smallMenu">
                <a href="text/bc/5" onclick="return false;" class="list-group-item active">TEXT</a>
                <a href="text/bc/1" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/2" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/3" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/4" onclick="return false;" class="list-group-item">TEXT</a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3" id="menu-padding-top">
            <div class="list-group" id="floatMenu">
                <a href="text/bc/5" onclick="return false;" class="list-group-item active">TEXT</a>
                <a href="text/bc/1" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/2" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/3" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/4" onclick="return false;" class="list-group-item">TEXT</a>
            </div>
        </div>

        <div class="col-md-9">
            <div id="wynik">
                {* Here is content loading. *}
            </div>
        </div>                   
    </div>
</div>

我尝试交换(jQuery代码)和href到data-href - 不起作用。

2 个答案:

答案 0 :(得分:0)

...尝试在preventDefault()处理程序中添加.click()。如果没有它,当您单击链接时,浏览器将导航到页面指示href属性。

添加以下行:

e.preventDefault();
你的代码中的

$(document).ready(function()
{
    init();
    $(window).resize(init);

    $('#floatMenu,#smallMenu').find('>a').click(function(e)
    {
        e.preventDefault(); //ADD HERE
        var t = this;
        $('#wynik').animate({opacity:0}, 'fast', function()
        {
            $(this).load(t.href, function()
            {
                $(this).animate({opacity:1}, 'fast');
            })
        });

        //$('#wynik').load(this.href);

        $(this).addClass('active').siblings().removeClass('active');

    }).first().click();
});

现在您阻止加载新页面。并且javascript执行您的处理程序,而无需在新页面中重定向。

AN EXAMPLE ...

答案 1 :(得分:0)

只需在处理程序的第一行添加event.preventDefeult()函数,如下所示:

$('#floatMenu,#smallMenu').find('>a').click(function(event)
{
    event.preventDefault();

    var t = this;
    $('#wynik').animate({opacity:0}, 'fast', function()
    {
        $(this).load(t.href, function()
        {
            $(this).animate({opacity:1}, 'fast');
        })
    });

    //$('#wynik').load(this.href);

    $(this).addClass('active').siblings().removeClass('active');

}).first().click();