个人中心
gpt4 book ai didi

javascript - 加载的 div Accordion 在窗口而不是容器 div 中打开

转载 作者：太空宇宙 更新时间：2023-11-03 18:28:39 24 4
gpt4 key购买 nike

我的父页面使用 ajax 将 div 加载到选项卡面板中的容器 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>

标签.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 方面，我是一个真正的新手，解决方案可能非常简单，但我无法让它工作。我曾尝试研究它但无济于事。我调用不同函数的方式有问题吗？我试过将 return 设为 false；在脚本中，但我可能没有把它放在正确的位置？我可以让 div 加载到选项卡面板 而无需 Accordion 工作，使用此脚本:

<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>

但如果我能让 Accordion 也能工作就好了。非常感谢任何帮助!

编辑:

我刚刚意识到我在加载了 ajax 的 div 中的 fancybox 链接也不起作用，我认为这是一个相关的问题，我也不知道如何解决这个问题。

最佳答案

您正在尝试加载包含 Accordion 的整个页面。要加载页面，您可以使用 iframe。 <br/>
$('#countries a.country').click(function(e) {<br/>
e.preventDefault();<br/>
if( $("#formcontainer").empty()){<br/>
var url=$(this).attr('href');<br/>
iframe = document.createElement("IFRAME"); <br/>
iframe.src = url + ' #form';<br/>
iframe.style.width= "100%";<br/>
iframe.style.border = 'none';<br/>
$("#formcontainer").append(iframe);<br/>
}
});
<br/>但这可能不是您要找的。请检查 Accordion 是如何在 http://jqueryui.com/accordion/#default 中呈现的

关于javascript - 加载的 div Accordion 在窗口而不是容器 div 中打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20310920/

24 4 0
文章推荐： c# - 在 Quartz.net 中安排一个 Action
文章推荐： ruby-on-rails - 用户属性不会保存
文章推荐： java - 隐藏在 C# 和 Java 中的基方法
文章推荐： ruby - 在进行相对日期运算时，这是 Ruby 时间类中的错误吗？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com