jquery标签问题答案

【问题标题】：jquery tabs problemjquery标签问题
【发布时间】：2011-05-03 16:00:50
【问题描述】：

我是 jquery 的新手，并使用以下方法创建了 10 个标签：

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

然后我在标签中使用了<li>a href="#tabs-1"> MYTAB </a> </li> htlm 代码。

我设法创建了静态标签，现在我可以来回查看标签的内容。

我面临的问题是每个选项卡都包含指向不同网站的单独链接，用户需要在其中输入密码/用户名。我的一些用户无法通过手机等进行操作。

然后我将我的设计更改为 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>

【问题讨论】：

您如何发布导致问题的代码而不是似乎可以正常工作的选项卡代码......这个有问题的 ajax 代码是什么？
这是在桌面上正常工作的代码。它在 ipad、iphone..etc 上不起作用。因为没有为每个选项卡输入登录信息，因此选项卡不会引入内容。如果我使用 ajax，它会要求用户身份验证并且它可以工作

标签： jquery-ui jquery jquery-ui-tabs

【解决方案1】：

为什么不直接使用内置的 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 -->

【讨论】：