Сбой вкладок HTML / jQuery - PullRequest
Новая
       0

Сбой вкладок HTML / jQuery

2 голосов
/ 16 января 2012

У меня есть HTML-код вкладок, которые я использую.В каждой вкладке я хочу iFrame с несколькими кнопками и текстовым полем.Вкладки не переключаются на каждый iframe, вместо этого ничего не происходит.Во втором коде содержимое вкладок отображается одновременно друг над другом.Это то, что я пытался, но это не сработало: 

    <html>
    <head>
      <title> iFrame Browser</title>
      <script language="javascript"> 
       function LoadPage(){ 
         var objFrame=document.getElementById("myIframe"); 
         objFrame.src=document.getElementById("URL").value;
        }
     </script>
    <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>   
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />


    <style>
    /* tab pane styling */
    .panes div {
    display:none;       
    padding:15px 10px;
    border:1px solid #999;
    border-top:0;
    height:100px;
    font-size:14px;
    background-color:#fff;
    }

        </style>
    </head>

    <ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>
    <div class="panes">
        <div>
      <div style="Clear:both;"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40226-1/arrow-blue-rounded-left.jpg" height="15" width="15" VALUE="Back"  onClick="myIframe.history.back()"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40228-1/arrow-blue-rounded-right.jpg" height="15" width="15" VALUE="Forward"  onClick="myIframe.history.forward()"> 
     <input type="text" style="width:1000px" value="http://" class="frmUrlVal" ID="URL">
     <input type="image" src="http://polaris.umuc.edu/~mahearn/images/arrowbutton.png" height="20" width="20" class="frmSubmit" value="Go" onclick="LoadPage()">
     <input type="button" value="Reload" onclick="document.frames['myIframe'].location.reload(true)">
    </div>
    <iframe align="center" width="100%" height="90%" src="http://gravitate.webs.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
    <div>
    <div style="Clear:both;"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40226-1/arrow-blue-rounded-left.jpg" height="15" width="15" VALUE="Back"  onClick="myIframe.history.back()"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40228-1/arrow-blue-rounded-right.jpg" height="15" width="15" VALUE="Forward"  onClick="myIframe.history.forward()"> 
     <input type="text" style="width:1000px" value="http://" class="frmUrlVal" ID="URL">
     <input type="image" src="http://polaris.umuc.edu/~mahearn/images/arrowbutton.png" height="20" width="20" class="frmSubmit" value="Go" onclick="LoadPage()">
     <input type="button" value="Reload" onclick="document.frames['myIframe'].location.reload(true)">
    </div>
<iframe align="center" width="100%" height="90%" src="http://gravitate.webs.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
    <div>
    <div style="Clear:both;"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40226-1/arrow-blue-rounded-left.jpg" height="15" width="15" VALUE="Back"  onClick="myIframe.history.back()"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40228-1/arrow-blue-rounded-right.jpg" height="15" width="15" VALUE="Forward"  onClick="myIframe.history.forward()"> 
     <input type="text" style="width:1000px" value="http://" class="frmUrlVal" ID="URL">
     <input type="image" src="http://polaris.umuc.edu/~mahearn/images/arrowbutton.png" height="20" width="20" class="frmSubmit" value="Go" onclick="LoadPage()">
     <input type="button" value="Reload" onclick="document.frames['myIframe'].location.reload(true)">
    </div>
    <iframe align="center" width="100%" height="90%" src="http://gravitate.webs.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
        $(function() {
    $("ul.tabs").tabs("div.panes > div");
    });
    </script>

    </body>

    </html>

Еще один сбой: 

    <html>
<head>
  <title> iFrame </title>
  <script language="javascript"> 
   function LoadPage(){ 
     var objFrame=document.getElementById("myIframe"); 
     objFrame.src=document.getElementById("URL").value;
    }
  </script>
<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
<script>
    $(function() {
        $( "#tabs" ).tabs({
            cookie: {
                // store cookie for a day, without, it would be a session cookie
                expires: 999
            }
        });
    });
    </script>
</head>
<body>

<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <div style="Clear:both;"> 
 <input type="text" value="http://amazon.co.uk" class="frmUrlVal" ID="URL">
 <input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
 <input type="button" VALUE="&lt; &lt; &nbsp; Back &nbsp;"  onClick="myIframe.history.back()"> 
 <input type="button" VALUE="Forward &nbsp; &gt; &gt;"  onClick="myIframe.history.forward()"> 
<div>
<iframe align="center" width="100%" height="90%" src="http://amazon.co.uk" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
    <div id="tabs-2">
        <div style="Clear:both;"> 
 <input type="text" value="http://" class="frmUrlVal" ID="URL">
 <input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
 <input type="button" VALUE="&lt; &lt; &nbsp; Back &nbsp;"  onClick="myIframe.history.back()"> 
 <input type="button" VALUE="Forward &nbsp; &gt; &gt;"  onClick="myIframe.history.forward()"> 
<div>
<iframe align="center" width="100%" height="90%" src="http://facebook.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
    <div id="tabs-3">
        <div style="Clear:both;"> 
 <input type="text" value="http://amazon.co.uk" class="frmUrlVal" ID="URL">
 <input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
 <input type="button" VALUE="&lt; &lt; &nbsp; Back &nbsp;"  onClick="myIframe.history.back()"> 
 <input type="button" VALUE="Forward &nbsp; &gt; &gt;"  onClick="myIframe.history.forward()"> 
<div>
<iframe align="center" width="100%" height="90%" src="http://amazon.co.uk" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
</div>

</div>
</body>
</html>

Что я сделал не так?

1 Ответ

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

Я добавил пример с несколькими рабочими вкладками по следующему URL. Это может потребовать немного больше работы, но должно помочь вам в этом.

http://benjaminhopkins.co.uk/stackoverflow/Iframewithtabs.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...