ansaurus

Question

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

Answer 1

+1 A:

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"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"&gt;&lt;/script&gt;
  <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>

St.Woland 2010-01-16 23:30:44

That was really helpful. However, the way they did it was to have a ul with similar li images. I was wondering how I can have different images for each li. Should I add an id after <li, like: <li id="tab1">then add the image via css? and how will this affect the code here:http://docs.jquery.com/UI/Tabs?Thanks again!

laura 2010-01-17 00:06:46

You may use classes: <li class="link-1"> etc. You may see how it works in the css file above. And, finally, take a look at this option: http://docs.jquery.com/UI/Tabs#option-tabTemplate It's probably what will fit your needs.

St.Woland 2010-01-17 00:32:23

is it possible for me to send you my code? i tried following the tutorial, but i can't seem to make it work. :o I'd be eternally grateful if you agreed. :) my email address is lauranoel at me dot com

laura 2010-01-17 18:14:49

I've sent you the code on the past weekend, have you managed to set it up?

St.Woland 2010-01-30 09:26:27

ansaurus

tags:

views:

answers:

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

Update

related questions