jquery проблема с вкладками

Я новичок в 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>

jquery jquery-ui jquery-ui-tabs
person bobo    schedule 03.05.2011    source источник
comment
как насчет того, чтобы опубликовать код, который вызывает проблемы, вместо кода табуляции, который, кажется, работает нормально ... что это за код ajax, который вызывает проблему?   -  person Thomas Shields    schedule 03.05.2011
comment
это код, который правильно работает на рабочем столе. это не работает на ipad, iphone .. и т. д. поскольку для каждой вкладки не вводится информация для входа, вкладки не вносят содержимое. Если я использую ajax, он запрашивает аутентификацию пользователя, и он работает   -  person bobo    schedule 03.05.2011

Ответы (1)


arrow_upward
0
arrow_downward

Почему бы просто не использовать встроенные вкладки 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 -->
person Chris Dowdeswell    schedule 05.05.2011