jQuery标签问题 [英] jquery tabs problem
问题描述
我是jquery新手，并使用:创建了10个标签
I am new to jquery and created 10 tabs using :
$(document).ready(function() {
$('#tabs').tabs();
});
然后我在选项卡上使用了<li>a href="#tabs-1"> MYTAB </a> </li> htlm代码.
Then I used <li>a href="#tabs-1"> MYTAB </a> </li> htlm code for my tabs.
我设法创建了静态标签，现在我可以来回查看标签的内容.
I managed to create static tabs and now I can go back and forth to see the content of my tabs.
我面临的问题是每个选项卡都包含指向不同网站的单独链接，用户需要在其中输入密码/用户名.我的某些用户无法通过手机等操作.
The problem I am facing is each tab contains a seperate link to a different website where users need to enter their passwords/usernames. Some of my users werent able to do that from their phones etc.
然后我将设计更改为ajax，它可以正常工作，但是每次都会刷新页面(用户不希望这样做).
I then changed my design to ajax and it works fine but page refreshes each time (users do not want that).
<li>a href="url"> MYTAB </a> </li>
解决这个问题的最佳解决方案是什么?
What is the best solution to get around from this?
谢谢
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选项卡?
Why not just use the inbuilt Ajax tabs?
<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 -->
这篇关于jQuery标签问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
