Is it possible to load a page with jquery that uses javascript?

Is it possible to load a page with jquery that uses javascript?

Hello!
I am developing my personal website!
And I am trying to implement it with JS completely. which means I need the page to be one front end page.
But the back-end pages would be the ones which do the work and calculations!
In other words and more explaination:
I would like to have one "index.php" page that contains only a nav bar which handles the mission.
Once the page load it loads with the content of "home.php" (the landing page) if the "contact" tab is clicked then I would like to load the "ContactMe.php" page content.
I have done this already! but the problem is:
"home.php" uses alot of javascript functions and jquery plug-ins. when I load it, it looks messy that you think the JS is disabled in your machine 
Note: the loading has been done with those methods: .load(), $.ajax! -> same results!

The conclusion:
* "home.php"
* "ContactMe.php"
* "About.php"
Is it possible to load those pages in the "index.php" and still have their JS functions function correctly and display as if they were accessed individually?

The goal that I am trying to achieve is that I make my whole website for the visitor as "One Page Site"! I am challenging myself with it though!

Thank you in advance for your informative posts!


Please Note that I have only put the <html><head><body> tags in the index.php and removed them from the back-end pages such as home.php, contactme.php and about.php! for that sake that it works correctly! but with no hope!

Overview for the problem I sake help with!

file -> index.php

  1. <html>
    <
    head>
    // includes all CSS files
    // includes jQuery framework! 
    //includes all my JS custom functions!
     



    <title>INDEX.PHP</title>


    // THEN ?
    <script type="text/javascript">
    $(function(){

                $(


    ".NavBarTab#contact").click(function(){

                       $(

    ".GeneralContent").load('contactme.php');

                });

    });




    </script>

    </head>
    <body>

    <div class="Navi">
    <div class="NavBarTabs">Home</div>
    <div class="NavBarTabs" id="contact">Contact me</div>
    <div class="NavBarTabs">About</div>
    </div>

    <div class="GeneralContent">
    //content!
    </div>

    </body>
    </html>















File -> contactme.php

  1. // No <html><head><body> tags at all! nor js codes embedded !


    <div id="FormToggle"// note: toggle which means there is an effect function I made in my index.php imported JS files!

    // some elements and events to be clicked to fire an ajax call!


    </div>

Your help is greatly appreciated!