在同一页面中链接到具有直接 href 的另一个页面的下拉列表

Question

使用我想要的可怕的 href 链接到页面内容时遇到问题。

现在，如果我单击下拉列表，它将转到扶手椅。 例如点击沙发还是去扶手椅。

如何转到其他类别？

所有类别的信息都存储在同一页面中。 当用户点击不同的类别时，我需要显示正确的内容。

这是我在productData.php 中用于列表的数组

$collectionArr = [
["catCode"=>"ac", "catName"=>"Armchair"],
["catCode"=>"sf", "catName"=>"Sofa"],
["catCode"=>"st", "catName"=>"Side Table"],
["catCode"=>"ct", "catName"=>"Coffee Table"],
["catCode"=>"dt", "catName"=>"Table"],
["catCode"=>"cs", "catName"=>"Chair / Stool"],
["catCode"=>"sb", "catName"=>"Side Board"],
];

我的collectiondropdown.php

  foreach ($collectionArr as $name => $liDetail) {
  echo "<a href='collectionPage.php#{$liDetail["catCode"]}' {$liDetail["catName"]}</a><hr />";

}

我的菜单 HTML

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <?php include 'productData.php'; ?>
        <?php
           include 'collectiondropdown.php'
         ?>
    </ul>
  </li>   

存储所有内容的 HTML

<div id="ac">
<ul>
<li><a name="ac" href="collectionPage.php?cat=ac&page=1">1</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=2">2</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=3">3</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=4">4</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=5">5</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=6">6</a></li>
<li><a name="ac" href="collectionPage.php?cat=ac&page=7">7</a></li>
</ul>
 <!-----Page 1-------------------->
 <div id="acPage1" class="page" style="">
   <p>List of content after clicking 1</p>
 </div>
<!-----Page 2-------------------->
 <div id="acPage2" class="page" style="display:none">
   <p>List of content after clicking 2</p>
 </div>
</div><!----end of ac--->

<div id="sf">
<ul>
<li><a name="sf" href="collectionPage.php?cat=sf&page=1">1</a></li>
<li><a name="sf" href="collectionPage.php?cat=sf&page=2">2</a></li>
<li><a name="sf" href="collectionPage.php?cat=sf&page=3">3</a></li>
</ul>
<!-------Same as ac-------->
</div>
<div id="st">
xxxxxxxxxxx
</div>
<div id="ct">
xxxxxxxxxxx
</div>
<div id="dt">
xxxxxxxxxxx
</div>
<div id="cs">
xxxxxxxxxxx
</div>
<div id="sb">
xxxxxxxxxxx
</div>

Answer 1

如果我正确理解了您的问题，那么命名锚点可能是一个解决方案。为此，需要实施以下更改 -

在 HTML 页面中插入命名的锚点。我建议将 div 中的第一个单词包含在一个命名锚中，如下所示 -

<div id="ac">
    <a name="ac">x</a>xxxxxxxxxx
</div>
<div id="sf">
    <a name="sf">x</a>xxxxxxxxxx
</div>
<div id="st">
    <a name="st">x</a>xxxxxxxxxx
</div>
....
....
<div id="sb">
    <a name="sb">x</a>xxxxxxxxxx
</div>

对于动态列表，更新代码如下，使链接指向命名的锚点 -

foreach ($collectionArr as $name => $liDetail) {
    echo "<a href='collectionPage.php#{$liDetail["catCode"]}'>{$liDetail["catName"]}</a><hr />";
}