0

好的，这是我的问题。我有一个页面，我在其中使用切换来显示/隐藏有关文章的信息，只需单击名称即可。我还有另一个页面，它使用 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>

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

我已经搜索过，但没有找到任何类似的东西......有什么想法吗？

我希望我说清楚了^^"

4

2 回答 2

0

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

两次加载jquery会导致错误？

于 2012-07-10T21:52:18.817 回答
0

好的，问题解决了。

对于那些有类似问题的人：

问题主要来自这样一个事实，即每个选项卡上都加载了内容，并且选项卡之间切换的 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）

于 2012-07-11T08:43:42.003 回答