Advanced use of jQuery load() function
<p>I am reading a book about Javascript and jQuery and using one of the examples I have created an ajax web page with 3 tabs :
Here is the code : (of the main page and of the first tab, the other two tabs are identical)</p>

<h2>load.html</h2>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;News Headlines&lt;/title&gt;
&lt;link href="../_css/site.css" rel="stylesheet"&gt;
&lt;style&gt;
#newslinks li {
    display: inline-block;
    margin-right: 20px;
}
#newslinks li a {
    padding: 5px 10px; 
    background-color: white;
    color: black !important;
    text-decoration: none;  
}
#newslinks li a:hover {
    background-color: rgb(110,138,195);
    color: white !important;    
}
#headlines .newsItem {
    margin-top: 10px;
    padding: 20px;
    border: 1px solid white;    
}
&lt;/style&gt;
&lt;script src="../_js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function() {
  $('#newslinks a').click(function() {
     var url=$(this).attr('href');
     $('#headlines').load(url + ' #newsItem');
     return false;
  }); //end click

}); // end ready
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="wrapper"&gt;
    &lt;div class="header"&gt;
        &lt;p class="logo"&gt;JavaScript &lt;i&gt;&amp;&lt;/i&gt; jQuery &lt;i class="mm"&gt;The&lt;br&gt;Missing&lt;br&gt;Manual&lt;/i&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt;
        &lt;div class="main"&gt;
            &lt;h1&gt;News Headlines&lt;/h1&gt;
            &lt;ul id="newslinks"&gt;
            &lt;li&gt;&lt;a href="today.html"&gt;Today&amp;#8217;s News&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="yesterday.html"&gt;Yesterday&amp;#8217;s News&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="lastweek.html"&gt;Last Week&amp;#8217;s News&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;div id="headlines"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
        &lt;p&gt;JavaScript &amp;amp; jQuery: The Missing Manual, by &lt;a href="http://sawmac.com/"&gt;David McFarland&lt;/a&gt;. Published by &lt;a href="http://oreilly.com/"&gt;O'Reilly Media, Inc&lt;/a&gt;.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h2>today.html</h2>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;News Headlines&lt;/title&gt;
&lt;link href="../_css/site.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="wrapper"&gt;
    &lt;div class="header"&gt;
        &lt;p class="logo"&gt;JavaScript &lt;i&gt;&amp;&lt;/i&gt; jQuery &lt;i class="mm"&gt;The&lt;br&gt;Missing&lt;br&gt;Manual&lt;/i&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt;
        &lt;div class="main"&gt;
            &lt;div id="newsItem"&gt;
            &lt;h2 class="shadowLine"&gt;Today&amp;#8217;s News&lt;/h2&gt;
            &lt;h3&gt;Labore et dolore&lt;/h3&gt;
  &lt;p&gt;Quis nostrud exercitation ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt cupidatat non proident, duis aute irure dolor. Consectetur adipisicing elit, velit esse cillum dolore ut aliquip ex ea commodo consequat. Ullamco laboris nisi ut enim ad minim veniam. Ut enim ad minim veniam, lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.&lt;/p&gt;
  &lt;h3&gt;Quis nostrud exercitation&lt;/h3&gt;
  &lt;p&gt; ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt cupidatat non proident, duis aute irure dolor. Consectetur adipisicing elit, velit esse cillum dolore ut aliquip ex ea commodo consequat. Ullamco laboris nisi ut enim ad minim veniam. Ut enim ad minim veniam, lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.&lt;/p&gt;
  &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
        &lt;p&gt;JavaScript &amp;amp; jQuery: The Missing Manual, by &lt;a href="http://sawmac.com/"&gt;David McFarland&lt;/a&gt;. Published by &lt;a href="http://oreilly.com/"&gt;O'Reilly Media, Inc&lt;/a&gt;.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Now I am trying to add another page instead of today.html but with no results so far.
The problem is that the new page I want to add is much more complicated than today.html so I need some help on this.
Of course the new tab1.html page works fine on its own
Here is the code.</p>

<h2>tab1.html</h2>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;News Headlines&lt;/title&gt;
    &lt;link href="../_css/site.css" rel="stylesheet"&gt;
    &lt;!--  Add fancyBox2 css--&gt;
    &lt;link rel="stylesheet" href="../fancybox2/source/jquery.fancybox.css" type="text/css" media="screen" /&gt;

    &lt;style&gt;
        .image {
            float: left;
            padding: 10px;
            border: solid 1px white;
            margin: 0 30px 30px 0;
        }
        .image:hover {
            border-color: red;
            background-color: rgb(204,204,204);
        }


    &lt;/style&gt;

    &lt;script src="../_js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
    &lt;!-- Add fancyBox2 script--&gt;
    &lt;script type="text/javascript" src="../fancybox2/source/jquery.fancybox.pack.js"&gt;&lt;/script&gt;

    &lt;script&gt;
        $(document).ready(function() {
            var URL = "http://api.flickr.com/services/feeds/groups_pool.gne";
            var ID = "35034346867@N01";
            var jsonFormat = "&amp;format=json&amp;jsoncallback=?";

            var ajaxURL = URL + "?id=" + ID + jsonFormat;
            $.getJSON(ajaxURL,function(data)
                    {
                        $('h1').text(data.title);
                        $.each(data.items,function(i, photo)

                                {
                                    var photoHTML = '&lt;span class="image"&gt;';
                                    photoHTML += '&lt;a class="fancybox" rel="gallery1" href="' + photo.media.m.replace('_m', '_b') + '"&gt;';
                                    photoHTML += '&lt;img src="' + photo.media.m.replace('_m', '_s') + '"&gt;&lt;/a&gt;';


                                    $('#photos').append(photoHTML);

                                }


                        );//end each

                        $('#photos .fancybox').fancybox(
                                {
                                    openEffect:'none',
                                    closeEffect:'none'
                                }
                        );
                    }

            );//end get JSON


        }); // end ready
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="wrapper"&gt;
    &lt;div class="header"&gt;
        &lt;p class="logo"&gt;JavaScript &lt;i&gt;&amp;&lt;/i&gt; jQuery &lt;i class="mm"&gt;The&lt;br&gt;Missing&lt;br&gt;Manual&lt;/i&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt;
        &lt;div class="main"&gt;
            &lt;div id="newsItem"&gt;
                &lt;h1&gt;Flickr Images&lt;/h1&gt;
                &lt;div id="photos"&gt;&lt;/div&gt;
                &lt;br class="clearLeft"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
        &lt;p&gt;JavaScript &amp;amp; jQuery: The Missing Manual, by &lt;a href="http://sawmac.com/"&gt;David McFarland&lt;/a&gt;. Published by &lt;a href="http://oreilly.com/"&gt;O'Reilly Media, Inc&lt;/a&gt;.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The site.css file is located <a href="http://pastebin.com/Hehr2F2n" rel="nofollow">here</a> and instructions on how to install fancybox2 can be found here : <a href="http://fancyapps.com/fancybox/" rel="nofollow">http://fancyapps.com/fancybox/</a></p>

<p>The question is how can I embed tab1 into load without copying all the javascript code in load.html?</p>
