I have a page (services.html) which contains a set of links on the left and an empty space on the right.

 

When a link is clicked, the empty space is filled with content dynamically loaded from another .html file sitting on the server using JS.

 

I also have the same set of links on my home page (index.html).

 

What I'm wondering is how do I click on a link in the index.html page and it opens up the services.html with the appropriate content loaded???

 

Here's the abridged version of code I'm using:

 

Services.html:

 

<head>
<script type="text/javascript" src="resources/scripts/dynamicPage/ajaxtabs.js"></script>
</head>

<div id="content_left">

               <ul id="services_dynamic" class="services_nav">
               	<li id="services_nav_title">Services Include...</li>
                   <li><a href="services/boilers.html"  rel="container" title="" >Boiler Services</a></li>
                   <li><a href="services/central_heating.html" rel="container" title="" >Central Heating Installations</a></li>
               </ul>

         </div> <!-- END of DIV Content_Left -->

         <div id="content_right">


      	  </div> <!-- END of DIV Content_Right -->


       <script type="text/javascript">

	var services=new ddajaxtabs("services_dynamic", "content_right")
	services.setpersist(true)
	services.setselectedClassTarget("link") //"link" or "linkparent"
	services.init()

	</script>

 

Same set of links on Index.html page:

 

<ul class="services_nav">
               	<li id="services_nav_title">Services Include...</li>
                   <li><a href="#"  >Boiler Services</a></li>
                   <li><a href="#"  >Central Heating Installations</a></li>
               </ul>

AJAX perhaps? I'd use jQuery myself, if what you ask is what I imagine.

I guess a simpler way to put it is...

 

Can I target a <div> in another page?

 

So in this case, someone clicks on a link in the index.html and the link is targeted to open up in the 'content_right' div of the services.html page...thus replacing the index.html page with the services.html and the correct content in the 'content_right' <div>?

I think you'll have to pass on the info in the URL, if you set the index links to open something like services.html?service=boiler then get the service value from the URL with javascript & load content appropriately.

 

Have a look at this to get started:

http://www.netlobo.com/url_query_string_javascript.html

jQuery Load Content - nice and easy capable of some powerful and impressive (add animations etc) results.

 

 

Documentation: http://api.jquery.com/category/ajax/

Just about the best demo and tut: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/