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>

私が言ったように、2ページ目が単独で表示されるときの切り替え作業。しかし、タブや切り替え後は機能しなくなります。

検索しましたが、そのようなものは見つかりませんでした...何か考えはありますか？

はっきりさせてほしいです^^」

4

2 に答える 2

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 に答える
0

あなたがそうしている特定の理由があるかどうかはわかりませんが、jqueryを2回ロードすることは一般的に良い考えではありません。両方のページをjqueryまたはjquery.minのいずれかに制限してみてください（iframe内のページは親ページのスクリプトの影響を受けないため、二重のjqueryになることを心配する必要はありません）。

jqueryを2回ロードするとエラーが発生しますか？

于 2012-07-10T21:52:18.817 に答える