1

次のような同じページの一部にリンクすることを知っています。

<a href='#A'>A</a>

<a name='A'>Here is A</a>

しかし、jquery と php で設計したとき、問題が発生しました。私のデザインはこんな感じです：すべてアルファベットです。文字の下に、div があります (item_A、item_B、item_c など...)。たとえばK文字をクリックすると、ページは#K divにリンクし、#K divにもそのコンテンツが表示されます(最初にサイトを開いたときは、アイテムdivの表示がないため)。しかし、問題は、#K (K は単なる例です) K はそのコンテンツを表示しますが、ページは #K div にリダイレクトされませんでした。自分でスクロールする必要があります。

コードは次のとおりです。

 <div class="content_letters">
      <ul>
      <?php $array_letter = array("A","B","C","Ç","D","E","F","G","H","I","İ",
                                  "J","K","L","M","N","O","P","R","S","Ş","T",
                                  "U","Ü","V","Y","Z");

      for ($i=0;$i<27;$i++) {

      echo "<li><a id='letter_{$array_letter[$i]}'
            href='#letter_{$array_letter[$i]}'>{$array_letter[$i]} | </a></li>"; 

       }
    ?>
     </ul>
</div>

<?php
    for ($i=0;$i<27;$i++) {
 ?>
    <div class="content_letter_block">
            <div class="text">
            <div class="show_hide">
              <a class="button" id="
               <?php echo 'button_letter_'.$array_letter[$i]; ?>">SHOW/HIDE</a>
            </div>

              <a name="<?php echo "letter_".$array_letter[$i].'">';?>
         <?php  echo $array_letter[$i]; ?></a> starts from here</div>

            </div>                          
    </div>

    <?php } ?>

    <div style='display:none'  id='<?php echo "item_".$array_letter[$i];?>'>    

      Here is item...
    </div>

jqueryコードは次のとおりです。

 $(document).ready(function() {
 // target everything with IDs that start with 'button_letter'

  $("[id^='button_letter']").click(function () {


// split the letter out of the ID
// of the clicked element and use it to target
// the correct div

$("#item_" + this.id.split("_")[1]).toggle();
});

$("[id^='letter']").click(function () {
$("#item_" + this.id.split("_")[1]).show();

});
});
4

3 に答える 3

0

URL にアンカーを指定することもできます。

<a href="your-page.html#k" />

リンクをクリックすると、そのページに移動し、ドキュメントが自動的にスクロールして次の位置に移動します。<a name="k">

于 2012-05-20T00:54:35.003 に答える
0

すべてのコードを表示する時間がないのに、scrollTop() メソッドを使用できない? ここ
を参照してください。

于 2012-05-19T10:25:48.370 に答える
0

ページ内の特定の ID まで jQuery でスクロールするには、次を使用します。

$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
于 2012-05-19T10:25:50.023 に答える