jQuery iframe hide/show

问题:

Well im coding a site, and now stuck at the jQuery part, which aint my strongest thing. The site contains a top-menu nav-bar:

<a href="aboutus.html" target="iframe"><img class="tab1" src="#.png"></a>
<a href="menu.html" target="iframe"><img class="tab2" src="#.png"></a>
<a href="gallery.html" target="iframe"><img class="tab3" src="#.png"></a>
<a href="shop.html" target="iframe"><img class="tab5" src="#.png"></a>
<a href="links.html" target="iframe"><img class="tab6" src="#.png"></a>
<a href="contact.html" target="iframe"><img class="tab7" src="#.png"></a>
</div>

And a iframe in the middle of the page, which loads the new html on nav click. When the index page loads, the iframe should not be seen before nav click. So ive got: iframe {display:none;} in css.

So, i need help with jQuery coding to show the iframe on nav click. Also with an effect to make the iframe hide again.

All the best.

回答1:

Assuming that the <iframe> has an id of contentIframe you could do the following:

Show the <iframe>:

$("#contentIframe").show();

Hide the <iframe>:

$("#contentIframe").hide();

回答2:

I think if you try to use a div and use the .load() method it will be better than the use of an iframe

$("a").click(function(){
$("#mydiv").load($(this).attr("href"));
});

回答3:

The jQuery toggle method would be helpful.