3 iFrames, 3 ссылки - Показать 1 iFrame с помощью onclick, скрывая остальные - PullRequest
Новая
       16

3 iFrames, 3 ссылки - Показать 1 iFrame с помощью onclick, скрывая остальные

0 голосов
/ 17 января 2010

У меня есть 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>

Каждая оболочка # - это идентификатор элемента div, который содержит iFrame. Элементы div, содержащиеся в элементе div вкладок выше, представляют собой изображения кнопок.

Как я могу показать 1-й кадр 1-го, а затем, когда будет нажата другая кнопка-изображение, этот iFrame будет скрыт, а iFrame, соответствующий нажатой кнопке, будет единственным показом 1?

Спасибо большое заранее !! :)

P.S. Вы можете проверить мой сайт www.giroapps.com, чтобы получить лучшее представление о том, чего я пытаюсь достичь. :)

1 Ответ

1 голос
/ 17 января 2010

Для вас найдется подходящее решение: 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...