Grow your CSS skills. Land your dream job.

jquery external and internal button hyperlink

  • # June 27, 2012 at 11:54 am

    how can i make it so that whenever a person clicks on the the first button it opens in a new window also how can i make it so that when a user clicks the second button that it opens in the same tab or window. i want to achieve this with jquery that being said i don’t want to write any inline javascript otherwise if that was the case i wouldn’t have posted the question i know how to achieve this using inline javascript but i want to do it using external js file and jquery.

    open in new window


    <button class="button cf-button preview-bt" role="button" type="button" href="#">
    <span class="button-content"> Preview </span>
    <span class="button-icon"> </span>
    </button>

    open in same window

    open in new window


    <button class="button cf-button preview-bt" role="button" type="button" href="#">
    <span class="button-content"> Preview </span>
    <span class="button-icon"> </span>
    </button>
    # June 28, 2012 at 7:37 am

    Well, I am not sure why you don’t just use anchor tags but if you must here is the solution:

    1. add an href attribute and set it to wherever you want the button to goto…
    2. add a “target” attribute, if you want it to open in the same page set it to “_self” if you want it to open in a new window set target to “_blank”

    Le Modified Buttons:




    Le jQuery


    $("button").click(function() {
    var url = $(this).attr('href'); // Get the URL to travel to
    var target = $(this).attr('target'); //Are we opening in a new window or the current window?
    window.open(url, target); //Open the window
    });
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".