gpt4 book ai didi

jquery - 嵌套 jQuery 选项卡

转载 作者:行者123 更新时间:2023-12-01 03:06:04 24 4
gpt4 key购买 nike

我是 jQuery 新手(几周了)。我正在尝试嵌套 jQueryUI选项卡控件。它工作正常,直到嵌套选项卡位于外部文件,然后我在 jQuery 源中抛出异常。这似乎在某种程度上是一个时间问题,因为如果我发出警报其工作的嵌套选项卡的 .ready 函数中的框。任何人都可以帮助?我确信这个问题之前一定有人问过,但之后几个小时的搜索我似乎找不到解决方案。

这是我非常简单的例子......

外部标签

    <head id="Head1" runat="server">
<title></title>
<link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/
jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#OuterTab").tabs();
});
</script>
</head>
<body>
<div id="OuterTab">
<ul>
<li><a href="innerTab1.aspx" title="InnerTab1"><span>InnerTab1</
span></a></li>
<li><a href="innerTab2.aspx" title="InnerTab2"><span>InnerTab2</
span></a></li>
</ul>
<div id="InnerTab1">
</div>
<div id="InnerTab2">
</div>
</div>
</body>
</html>

InnerTab1.aspx

    <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/
jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabA1"><span>InnerTabA1</span></a></li>
<li><a href="#tabA2"><span>InnerTabA2</span></a></li>
</ul>
<div id="tabA1"></div>
<div id="tabA2"></div>
</div>
</body>
</html>

InnerTab2.aspx

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/
jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabB1"><span>InnerTabB1</span></a></li>
<li><a href="#tabB2"><span>InnerTabB2</span></a></li>
</ul>
<div id="tabB1"></div>
<div id="tabB2"></div>
</div>
</body>
</html>

提前致谢!

阿德里安

最佳答案

您肯定会因为重复的“Tabs”ID 属性而遇到一些麻烦。以下示例应该可以实现您的需求:
主文件(外部选项卡)

<html>
<head id="Head1" runat="server">
<title></title>
<link type="text/css" href="http://static.jquery.com/ui/themes/base/ui.base.css"
rel="stylesheet" />
<link type='text/css' href='http://static.jquery.com/ui/themes/base/ui.tabs.css'
rel='stylesheet'>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

</head>
<body>
<div id="OuterTab">
<ul>
<li><a href="#InnerTab1" title="InnerTab1"><span>InnerTab1</span></a></li>
<li><a href="#InnerTab2" title="InnerTab2"><span>InnerTab2</span></a></li>
</ul>
<div id="InnerTab1">
</div>
<div id="InnerTab2">
</div>
</div>
<script type="text/javascript">
$(function() {
$("#OuterTab").tabs();
$('#InnerTab1').load('tab1.html', function() {
$('#tabs').tabs();
});
$('#InnerTab2').load('tab2.html', function() {
$('#tabs2').tabs();
});
});
</script>
</body>
</html>

选项卡 1 (tab1.html)

<div id="tabs">
<ul>
<li><a href="#tabB1"><span>InnerTabB1</span></a></li>
<li><a href="#tabB2"><span>InnerTabB2</span></a></li>
</ul>
<div id="tabB1">
This is tab b1 content
</div>
<div id="tabB2">
This is tab b2 content
</div>
</div>

选项卡 2 (tab2.html)

<div id="tabs2">
<ul>
<li><a href="#tabA1"><span>InnerTabA1</span></a></li>
<li><a href="#tabA2"><span>InnerTabA2</span></a></li>
</ul>
<div id="tabA1">
This is tab A1 content
</div>
<div id="tabA2">
This is tab A2 content
</div>
</div>

这样,当您运行主文件时,将通过 jQuery 请求两个选项卡文件并将其加载到适当的 div 中。然后我定义了一个回调来激活刚刚加载的选项卡。

如果您需要更多详细信息,请继续发表评论。

关于jquery - 嵌套 jQuery 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1661949/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com