我的父页面使用ajax将标签加载到选项卡面板中的容器div中。
父页面标记：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="tabs.css">
<script>
$(document).ready(function() {
$('.tab-link').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$("li.tab-link[data-tab='"+ tab_id+"']").addClass('current');
$("#"+tab_id).addClass('current');
});
$('#countries a.country').click(function() {
var url=$(this).attr('href');
$('#formcontainer').load(url + ' #form', function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
});
});
</script>
</head>
<body>
<ul id="tabs" class="tabs">
<li id="tab1" class="tab-link current" data-tab="tab-1">tab1</li>
<li id="tab2" class="tab-link" data-tab="tab-2">tab2</li>
<li id="tab3" class="tab-link" data-tab="tab-3">tab3</li>
<li id="tab4" class="tab-link" data-tab="tab-4">tab4</li>
<li id="tab5" class="tab-link" data-tab="tab-5">tab5</li>
</ul>
<div id="tab-1" class="tab-content current">sgeagaetwwe</div>
<div id="tab-2" class="tab-content">adafsafarsv</div>
<div id="tab-3" class="tab-content">wefsfsdfsdfaa</div>
<div id="tab-4" class="tab-content">afafsgaafsdfd</div>
<div id="tab-5" class="tab-content">
<ul id="countries">
<li><a class="country" href="form1.html">Form 1</a></li>
<li><a class="country" href="form2.html">Form 2</a></li>
<li><a class="country" href="form3.html">Form 3</a></li>
<li><a class="country" href="form4.html">Form 4</a></li>
</ul>
<div id="formcontainer"></div>
</div>
</body>
</html>
Tabs.css：
.tabbox{
width: 100%;
margin: 0 auto;
}
ul.tabs{
margin: 0 0 -1px 0;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: #fff;
color: #ff3399;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: #fff;
border-top: 1px solid #999999;
border-right: 1px solid #999999;
border-left: 1px solid #999999;
border-bottom: 1px solid #fff;
color: #ff3399;
}
.tab-content{
display: none;
background: #fff;
border: 1px solid #999999;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
子页面标记（form1.html）：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
</script>
</head>
<body>
<div id="form">
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
</p>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas.
</p>
</div>
</div>
</div>
</body>
</html>
我的问题是，当在父页面上单击链接时，div会在选项卡面板中加载一瞬间，然后打开全屏。在编写js / jquery时，我是一个真正的新手，解决方案可能非常简单，但我无法让它工作。我试过研究它但无济于事。这可能是我调用不同功能的方式有问题吗？我试过把假回报;在脚本中，但我可能没有把它放在正确的地方？我可以使用这个脚本将div加载到选项卡面板而不用手风琴工作：
<script>
$(document).ready(function() {
$('.tab-link').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$("li.tab-link[data-tab='"+ tab_id+"']").addClass('current');
$("#"+tab_id).addClass('current');
});
$('#countries a.country').click(function() {
var url=$(this).attr('href');
$('#formcontainer').load(url + ' #form');
return false;
});
});
</script>
但如果我能让手风琴也奏效，那将会很棒。任何帮助都很明确！
修改
我刚刚意识到我在ajax加载的div中的fancybox链接也无法正常工作，我认为这是一个相关的问题，我也不知道如何解决这个问题。
答案 0 :(得分：0)
您正在尝试加载有手风琴的整页。要加载页面，您可以使用iframe。
$('#countries a.country').click(function(e) {
e.preventDefault();
if( $("#formcontainer").empty()){
var url=$(this).attr('href');
iframe = document.createElement("IFRAME");
iframe.src = url + ' #form';
iframe.style.width= "100%";
iframe.style.border = 'none';
$("#formcontainer").append(iframe);
}
});