CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3385923
user3385923

Reputation: 9

Stop javascript loading into div

I have this javascript code set up which loads the contents of a HTML page into my div #mid. This does it by default for ALL links on my website no matter where pressed. However, I want to link to an external website and don't want the javascript to load this into the div, I want it to open in a new tab.

<script src="javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="javascript/core.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
// Configuration
divID = '#mid';
loadingHTML = 'Loading..';
});
</script>

<script type="text/javascript">
$(function(){
 $(divID).load('pages/home.html');
});
</script>

To load links I just use:

<a href="pages/services.html"></a>

How can I stop it loading into the div for certain links which I choose? Thanks for the help!

Upvotes: 1

Views: 250

Answers (1)

Liftoff
Liftoff

Reputation: 25392

I assume that you have some sort of a way of telling which links you want to open in the div and which ones you want to open in a new tab.

For this example, I will use .internal as loading into the div and .external as loading in a new tab.

The window.open(url) function is what you are looking for:

$(document).ready(function(){

    $("a.internal").click(function(e){

        e.preventDefault();
        $(divId).load($(this).attr("href"));

    });

    $("a.external").click(function(e){

        e.preventDefault();
        window.open($(this).attr("href"));

    });

});

So an internal-loading link would look like this:

<a href="/pages/somePage.html" class="internal">An Internal Link</a>

And an external link would look like this:

<a href="http://www.google.com" class="external">An External Link to Google</a>

Upvotes: 2

Related Questions