Question

I have two html pages, when you click on something on the first html, it will go to the second one. What I want to do is to show text according to what you clicked on the first html. different texts are wrapped with different ids. Here’s how I wrote:

<a href='secondpage.html#one'></a> <a href='secondpage.html#two'></a> <a href='secondpage.html#three'></a> 

I’m expecting to see two.html load the text with id ‘one’, but it doesn’t work, does anyone know what I did wrong?

Here’s the code on second page:

<ul id='menu' class='aaa'>     <li><a id='one' href='#'>one</a></li>     <li><a id='two' href='#'>two</a></li>     <li><a id='three' href='#'>three</a></li> </ul> 

And I have a JS file to modify each id:

$('one').observe('click', function() {     $('Pic').writeAttribute('src','picone.jpg');     $('Bio').update('texthere!'); }); 

Same for two and three.

Right now if I click on a button on the first page, it will always show the text and pic for ‘one’, no matter which button I click.

But I want to see the pic and text for ‘two’ if i click on it.

Answer 1

What you want to do is simulate a click on your anchor when the page loads. Since you’re using jQuery, the simplest approach (but far form best) would be the following:

 $(window).observe('domready', function () {     $(location.hash).click(); }); 

attach ondomready-event to window. Fetch element with id=one (with jQuery this would be ‘#one’, same as your location.hash would be, very handy in this case), trigger a click on it.

You might need to replace $(location.hash).click(); with $(location.hash).get(0).click() since jQuery tend to return arrays of jQuery-objects.

But a better solution in your case would be to have an event-handler that you can trigger manually, thus circumvent the need of firing events, aswell as drop the anchors and put onclick directly on your li’s.

And furthermore, why do you load a second page when all you seem to want to do is to show/hide content dynamically? Do it on the same page…