3个iFrames,3个链接 - 使用onclick显示1个iFrame,同时隐藏其他iFrame

时间:2010-01-16 23:08:10

标签: javascript html css iframe

我在一个页面中有3个按钮图像,这样当您按1时,它应显示与其相关的iFrame,并隐藏其他图像。我刚刚开始学习webdev,我已经在网上浏览了,但我似乎无法使其成功。 :○

这是我的代码:

<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>

每个包装器#是包含iFrame的div的id。上面选项卡div中包含的div是按钮图像。

如何显示1帧第1帧,然后点击其他按钮图像时,iFrame将隐藏,与点击按钮对应的iFrame将是唯一显示的?

提前非常感谢!! :)

P.S。你可以查看我的网站www.giroapps.com,以更好地了解我正在努力实现的目标。 :)

1 个答案:

答案 0 :(得分:1)

有一个很好的解决方案:http://www.stilbuero.de/jquery/tabs_3/

快速举例:

<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>

更新

关于你的申请:

<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>