在同一新标签页中打开外部链接

Question

How to open external links in the same new tab in the same browser window ?

( ie first click in an external link triggers a new tab, but subsequent clicks on the external links open up in that same tab without creating additional tabs in the browser window )

Example : See how LegWorkStudio doing it in their portfolio in between the following links

1. http://www.legworkstudio.com/interactive/laika-the-boxtrolls
2. http://www.legworkstudio.com/interactive/kentucky-fried-chicken
3. http://www.legworkstudio.com/interactive/newton-run-better
4. http://www.legworkstudio.com/interactive/coke-ahh-effect

Answer 1

HTML :

<div id="target" />
<div id="source"><p>bla bla bla</p></div>

Content replacement via normal javascript :

document.getElementById("target").innerHTML = document.getElementById("source").innerHTML;

Content replament via jQuery :

$("#target").html($("#source").html());

You can bind this code to a link by adding the onclick method to the link and wrapping it in a function (normal JS) or via the different methods of jQuery (on, click).

Example JS:

<a id="copytext" href="#" onclick='copyText();return false'>Copy text</a>
<script>
    function copyText() {
        document.getElementById("target").innerHTML = document.getElementById("source").innerHTML;
    }
</script>

Example jQuery :

<script>
$(function() {
    $("#copyref").click(function(e) {
        e.preventDefault();
        $("#target").html($("#source").html());
    });
})
</script>

Answer 2

It seems they just change window.location variable onclick then operates some JS code to display the right section.

At load, they surely read the window.location last argument and display the right section.

You can make something like that :

var myButton = document.getElementById("sectionXXXButton");
myButton.onclick = function(){
    var a = window.location.split("/");
    a[a.length-1] = "XXX";
    window.location = a.join("/");
    // Some code to undisplay / display appropriate sections
}