下拉列表链接到同一页面中具有直接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 />";
}