Question

好的，这是我的问题。我有一个页面，我用它切换显示/隐藏有关文章的信息，点击名称。我有另一个页面，使用jQuery UI选项卡显示相同的页面，但具有不同的参数（确切地说是3个选项卡：按速率，按日期和按名称排序）。

所以一切正常，直到我开始切换标签并尝试在其他标签中切换元素： - 有时候一切正常 - 有时什么也没发生。 - 有时它会多次切换，好像脚本已多次加载一样。

更准确地说，这是我的代码：

我显示标签的页面：

    <link rel="stylesheet" href="/projectsoul/CSS/design/jquery.ui.all.css" />
    <link rel="stylesheet" href="/projectsoul/CSS/design/jquery-ui-1.8.21.custom.css" />
    <script type="text/javascript" src="/projectsoul/JS/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/projectsoul/JS/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="/projectsoul/JS/jquery-ui-1.8.21.custom.min.js">                       </script>

               ...
                 ...
                 ...
        <div id="content" class="content" class="ui-tabs">
        <ul>
            <li><a href="articles.php" ><span>By Date</span></a></li>
            <li><a href="articles.php?orderby=rate"><span>By Rate</span></a></li>
            <li><a href="articles.php?orderby=name"><span>By Name</span></a></li>
        </ul>
    </div>

     .... 
     ....
     ....


        $( "#content" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Fail to load content."
                     );
            }
        }
    });

    $( "#content").tabs({
            fx: { height: 'toggle', opacity: 'toggle', duration: 'slow' }
        });

    $('#content').tabs({
        load: function(event, ui) {
            $(ui.panel).delegate('.intabs', 'click', function(event) {
                $(ui.panel).load(this.href);
                event.preventDefault();
            });
        }
    });

现在，这是我在这些标签中显示的页面：

    <link rel="stylesheet" href="/projectsoul/CSS/design/jquery.ui.all.css" />
<link rel="stylesheet" href="/projectsoul/CSS/design/jquery-ui-1.8.21.custom.css" />
<script type="text/javascript" src="/projectsoul/JS/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/projectsoul/JS/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/projectsoul/JS/jquery-ui-1.8.21.custom.min.js"></script>

 <?php
while($articles= $articles_data->fetch())
{?>

 <h2><a class="toggler" id="displayText<?php echo $articles["id"] ?>"><?php echo nl2br(htmlspecialchars($articles["name"])); ?></a></h2>

  ... 
  ...

  <div class="toggle" id="displayText<?php echo $articles["id"] ?>_content">
 // CONTENT                 
  </div>


   } 
   // END OF WHILE

    <script>
    $(document).ready(function() {
       $('.toggle').hide();
       $('.toggler').click( function() {
            var target = this.id + '_content';
            // Use ID-selectors to toggle a single element.
            $('#' + target).toggle();
            // Use class-selectors to toggle groups of elements.
            $('.' + target).toggle();
            $('.toggle.always').toggle();
        });
     });
     </script>

正如我所说，单独显示第二页时的切换工作。但是在标签中和切换后它不再起作用了。

我已经搜索过，但没有找到任何看起来像那样的东西...... 有什么想法吗？

我希望自己明白了^^＆＃34;

Answer 1

我不确定您是否有这样做的特殊原因，但加载jquery两次通常不是一个好主意。尝试将两个页面限制为jquery或jquery.min（iframe中的页面不受父页面脚本的影响，因此您不必担心它会获得双重jquery）。

loading jquery twice causes an error?

Answer 2

好的，问题解决了。

对于那些有这样问题的人：

问题主要来自于内容加载到每个选项卡上，并且选项卡之间的切换div的ID没有明显的值。我刚刚改变了：

    <div class="toggle" id="displayText<?php echo $articles["id"] ?>_content">

这样的事情：

   <div class="toggle" id="displayText<?php echo $articles["id"] ?>_<?php echo $current_tab_id ?>_content">

（当然$ current_tab_id内容显示标签的id）

jQuery .toggle（）使用jQuery UI选项卡的奇怪行为

2 个答案: