1

我是 JQuery 的新手，我在尝试让一个函数工作时遇到问题，我在页面上的一个选项卡内有一个指向 JQuery UI 手风琴内的锚点的链接。我在 2 个选项卡（@ 选项卡中的 1 个）中有单独的手风琴 (2)。我拼凑了一些可行的代码，但又不可行。这是我所拥有的：

    <script type="text/javascript">
  $(function(){

  // Accordion
  $('#accordion2, #accordion3').accordion({ header: "h3",navigation: true,collapsible: true });

  // Tabs
            $('#tabs').tabs();

            // Tabs                                                                                                              
    var $tabs = $("#tabs").tabs();

    // Handle clicks for on-page accordion section links                                                                                  
   $("a.openTab").click(function(e) {
        var thisName = "";
        var $tabParent = null;
        var tabIndex = 0;
                    var $accordionParent = null;
        var accordionIndex = 0;

        // Prevent default click behavior                                                                            
        e.preventDefault();

        // Get the named anchor from the clicked link's href                                                         
        thisName = $(this).attr("href").split("#")[1];

        // Find the tab parent. Tabs should all have class "tab".                                                    
        $tabParent = $("a[name='" + thisName + "']").closest(".tab");

                    // Find the accordion parent. Accordion should all have class "accTable".                                                    
        $accordionParent = $("a[name='" + thisName + "']").closest(".accTable");

        // Get the index of this tab                                                                                 
        tabIndex = $(".tab").index($tabParent);

                    // Get the index of this accordion                                                                                 
        accordionIndex = $(".accTable").index($accordionParent);
                    // alert(accordionIndex);

        // Open the appropriate tab                                                                                  
        $tabs.tabs("select", tabIndex);

                    // Open the appropriate accordion section
                                            $('.accordionTabs').accordion( "option", "active", accordionIndex );

                    // Scroll down to selected opened accordion                             
              $('html, body').animate({
                            scrollTop:$("a[name='" + thisName + "']").offset().top
                        }, 2000);
    });




        });
    </script>
</head>

<body>

<DIV id=wrapper>

    <BR><BR>
        <a class="openTab" href="#tab1">Target anchor in tab 1</a><BR>
    <a class="openTab" href="#tab2">Target anchor in tab 2</a><BR>
  <a class="openTab" href="#tab3">Target anchor in tab 3</a><BR>
        <a class="openTab" href="#ServicesSkill">Services anchor within tab 2</a><BR>
        <a class="openTab" href="#SolutionsSkill">Solution anchor within tab 2</a><BR>
        <a class="openTab" href="#EducationSkill">Education anchor within tab 3</a><BR>
        <a class="openTab" href="#CustomerSkill">Customer anchor within tab 3</a><BR>
    <BR><BR><BR>



    <!-- Tabs -->
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>

        <div id="tabs-1" class="tab">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a name="tab1">This is a named anchor in tab 1.</a>
        </div>

        <div id="tabs-2" class="tab">
        <p>Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet 
        ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</p>
   <a name="tab2">This is a named anchor in tab 2.</a>

            <div id="accordion2" class="accordionTabs">
                <div>
                    <h3><a href="#">First</a></h3>
                    <div class="accTable">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
                </div>
                <div>
                    <h3><a href="#">Services</a></h3>
                    <div class="accTable">
                    <a name="ServicesSkill"></a>
                    Phasellus mattis tincidunt nibh.</div>
                </div>
                <div>
                    <h3><a href="#">Solutions</a></h3>
                    <div class="accTable">
                    <a name="SolutionsSkill"></a>
                    Nam dui erat, auctor a, dignissim quis.</div>
                </div>
            </div>          

        </div>

        <div id="tabs-3" class="tab">
            <div id="accordion3" class="accordionTabs">
                <div>
                    <h3><a href="#">Second</a></h3>
                    <div class="accTable">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
                </div>
                <div>
                    <h3><a href="#">Education</a></h3>
                    <div class="accTable">
                    <a name="EducationSkill"></a>
                    Phasellus mattis tincidunt nibh.</div>
                </div>
                <div>
                    <h3><a href="#">Customer</a></h3>
                    <div class="accTable">
                    <a name="CustomerSkill"></a>
                    Nam dui erat, auctor a, dignissim quis.</div>
                </div>
            </div>

        <P>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque
        nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor 
        ullamcorper augue.</P>
  <a name="tab3">This is a named anchor in tab 3.</a>
        </div>
    </div>

它将打开我在第一个选项卡中的第一个手风琴中的锚，但是当尝试打开指向我在第二个选项卡中的第二个手风琴中的任何锚的链接时它会变得不稳定。我修改了在此处其他地方找到的“openTab”函数，并添加了代码以尝试让它打开具有锚点的手风琴部分。我似乎无法弄清楚我有什么错误，它会在第一个手风琴中打开部分，但是当试图在第二个选项卡的第二个手风琴中打开一个部分时它出错了。它似乎正确地找到了手风琴部分的索引以及手风琴所在的选项卡索引。它要么不会打开该部分，要么有时会选择它并且不会打开该部分中的内容。尝试使用该功能打开 2nd 手风琴部分后，该部分将不会' 甚至在手动单击手风琴标题时打开。这一直让我疯狂地试图找出问题所在。有人对我做错了什么有任何想法吗？（对不起，如果编码没有缩进。这是我第一次在这里发帖）谢谢

4

1 回答 1

0

当您查找要打开的手风琴面板的索引时，您正在搜索页面上的所有手风琴面板，而不仅仅是当前手风琴中的面板。这就是为什么您的索引适用于第一个选项卡，但不适用于第二个选项卡。该数字与第一个选项卡中的手风琴面板数量不同。

改变

// Get the index of this accordion                                                                                 
accordionIndex = $(".accTable").index($accordionParent);

至

// Get the index of this accordion panel within this tab                                                                             
accordionIndex = $accordionParent.closest('.accordionTabs').find('.accTable').index($accordionParent);

附加评论：

  1. 您的手风琴面板周围有不必要的 div 级别
  2. 在尝试设置活动的手风琴面板之前，您没有检查以确保您单击了手风琴中包含的锚点
  3. 您应该只更改当前手风琴的活动手风琴面板，而不是全部。

看看这个：http: //jsfiddle.net/3p5QG/

于 2014-01-03T19:52:02.820 回答