3 iFrames, 3 Links - Show 1 iFrame using onclick, while hiding the others

开发者 https://www.devze.com 2022-12-16 10:23 出处：网络

I have 3 button-images in one开发者_开发技巧 page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I\'ve browsed onl

I have 3 button-images in one开发者_开发技巧 page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o

Here's my code:

<div id="tabs">  
<div id="overview">  
<a href="#wrapper">Overviews</a>  
</div>  
<div id="gallery">  
<a href="#wrapper2">Gallery</a>  
</div>  
</span>  
<div id="reviews">  
<a href="#wrapper3">Reviews</a>  
</div>  
</div>

Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.

How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?

Thank you so much in advance!! :)

P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)

There is a neat solution for you: http://www.stilbuero.de/jquery/tabs_3/

Quick example:

<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#tabs").tabs();
  });
  </script>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#fragment-1"><span>One</span></a></li>
            <li><a href="#fragment-2"><span>Two</span></a></li>
            <li><a href="#fragment-3"><span>Three</span></a></li>
        </ul>
        <div id="fragment-1">
            <iframe>IFrame1</iframe>
        </div>
        <div id="fragment-2">
            <iframe>IFrame2</iframe>
        </div>
        <div id="fragment-3">
            <iframe>IFrame3</iframe>
        </div>
    </div>
</body>

Update

In regards of your application:

<SCRIPT type="text/javascript">
    $(document).ready(function(){
        $("#tabs a").click( function() {
            $("#tabs-1").load(this.href);
            return false ;
        } ) ;
        $("#tabs a:first").click() ;
    });
</SCRIPT>

<DIV id="tabs">
    <DIV id="overview">
        <A class="imagelink lookA" href="./toframe.html">Overviews</A>
    </DIV>
    <DIV id="gallery">
        <A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
    </DIV>
    <DIV id="reviews">
        <A class="imagelink lookA" href="./trframe.html">Reviews</A>
    </DIV>
</DIV>
<div id="tabs-1"></div>