jQuery的標籤問題

我是新來的jQuery和創建使用的10個標籤：jQuery的標籤問題

$(document).ready(function() { 
$('#tabs').tabs(); 
});

然後我用<li>a href="#tabs-1"> MYTAB </a> </li> HTLM代碼爲我的標籤。

我設法創建靜態選項卡，現在我可以來回查看我的選項卡的內容。

我面對的問題是每個選項卡包含一個單獨的鏈接到一個不同的網站，用戶需要輸入他們的密碼/用戶名。我的一些用戶werent能夠通過手機等來做到這一點。

然後，我改變了我的設計到ajax，它工作正常，但每次刷新頁面（用戶不需要）。

<li>a href="url"> MYTAB </a> </li>

什麼是解決這個問題的最佳解決方案？

感謝

My script: 

<!DOCTYPE html> 
<html> 
<head> 
<META name="WebPartPageExpansion" content="full"> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function() { 
    $("#tabs").tabs(); 
    }); 
    </script> 
</head> 
<body style="font-size:62.5%;"> 

<div id="tabs"> 
    <ul> 
      <li><a href="#tabs-1">site1</a></li> 
      <li><a href="#tabs-2">site2</a></li> 
      <li><a href="#tabs-3">site3</a></li> 
      <li><a href="#tabs-4">site4</a></li> 
     </ul> 
      <div id="tabs-1"> 
      <iframe src="url1" width="100%" height="500"> 
      <p>Your browser does not support iframes.</p> </iframe> 
      </div> 
    <div id="tabs-2"> 
      <iframe src="url2" width="100%" height="500"> 
      <p>Your browser does not support iframes.</p></iframe> 
    </div> 
    <div id="tabs-3"> 
      <iframe src="url3" width="100%" height="500"> 
      <p>Your browser does not support iframes.</p></iframe> 
    </div> 
    <div id="tabs-4"> 
      <iframe src="url4"> 
      <p>Your browser does not support iframes.</p></iframe> 
    </div> 



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

來源

2011-05-03 bobo

你如何發佈導致問題的代碼而不是似乎正常工作的標籤代碼......這是什麼問題的ajax代碼？ – 2011-05-03 16:03:33

這是在桌面上正常工作的代碼。它不適用於ipad，iphone ..等等。因爲沒有登錄信息輸入每個標籤的標籤沒有帶入內容。如果我使用ajax，它會要求用戶驗證，並且它可以工作 – bobo 2011-05-03 17:12:52

爲什麼不直接使用內置的Ajax選項卡？

<meta charset="utf-8"> 
    <script> 
    $(function() { 
     $("#tabs").tabs({ 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html(
         "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
         "If this wouldn't be a demo."); 
       } 
      } 
     }); 
    }); 
    </script> 

<div class="demo"> 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Preloaded</a></li> 
     <li><a href="ajax/content1.html">Tab 1</a></li> 
     <li><a href="ajax/content2.html">Tab 2</a></li> 
     <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> 
     <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 
</div> 

</div><!-- End demo --> 



<div class="demo-description"> 
<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p> 
<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p> 
</div><!-- End demo-description -->

來源

2011-05-05 15:52:54

jQuery的標籤問題

回答

相關問題