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的标签问题

回答

相关问题