Jquery script linking problem?

Question

I'm new to JQuery and I was wondering how can I get the following code to work when I navigate from the home page to the page that uses this code instead of placing this code directly into the web page? I want to place this code via a script link instead of placing the code itself in the web page.

I hope I explained this correctly.

Here is the JQuery code.

$(document).ready(function() {

    //When page loads...
    $(".form-content").hide(); //Hide all content
    var firstMenu = $("#menu ul li:first");
    firstMenu.show();
    firstMenu.find("a").addClass("selected-link"); //Activate first tab
    $(".form-content:first").show(); //Show first tab content

    //On Click Event
    $("#menu ul li").click(function() {

        $("#menu ul li a").removeClass("selected-link"); //Remove any "selected-link" class
        $(this).find("a").addClass("selected-link"); //Add "selected-link" class to selected tab
        $(".form-content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the selected-link tab + content
        $(activeTab).fadeIn(); //Fade in the selected-link ID content
        return false;
    });

});

Answer 1

You can create an init function, so in your page have

$(document).ready(function() {
init();
});

Then in your external js file define an the init function thusly:

function init() {
    //When page loads...
    $(".form-content").hide(); //Hide all content
    var firstMenu = $("#menu ul li:first");
    firstMenu.show();
    firstMenu.find("a").addClass("selected-link"); //Activate first tab
    $(".form-content:first").show(); //Show first tab content

}

Event bindings can be creates just fine in the external file with nothing further to do, so just stick that code in there (as long as the js file is called after the elements have been created in your page - you can also put event bindings in your init function).