如何链接到与jQuery和PHP在同一页面中的特定部分？ [英] How to link to a specific part in the same page with jquery and php?

问题描述

我知道链接到同一页面中的一部分，例如：

I know to link to a part in the same page like :

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

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

但是当我使用jquery和php设计它时，我遇到了问题。我的设计是这样的：
有所有字母表。在信件下面，有divs（item_A，item_B，item_c等）。例如，当用户点击K字母时，页面将链接到#K div，同时#K div显示其内容（因为当网站首先打开时，项目div的显示为空）。但问题是，尽管#K（K只是例子）K显示其内容，页面没有重定向到#K div。你必须自己滚动。

But when I designed it with jquery and php, ı have a problem. My design is like : There are all letters of alphabet. Under the letters, there are there are divs (item_A,item_B,item_c etc...). When the user click K letter for example, page will link to #K div and also #K div display its content.(Because when the site open first, item divs' display are none). But the problem is, although #K (K is just example) K is displayed its content, page did not redirect to #K div. You must scroll by yourself.

以下是代码：

Here is the code :

 <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代码：

Here is the jquery code :

 $(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();

});
});

推荐答案

您也可以在网址中指定一个锚点。

You can specify an anchor in your url as well.

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

当您点击链接时，您将进入该页面，文档将自动滚动到该位置< a name =k>

When you click the link you will be taken to that page and the document will scroll automatically to the position of <a name="k">

这篇关于如何链接到与jQuery和PHP在同一页面中的特定部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！