Question

我想制作一个导航面板，其中包含跳转锚点作为链接。如何使锚链接转到下一个网页并跳转到为其分配的锚？

我尝试在网页中分配一个唯一的锚以匹配导航面板中的锚。到目前为止，这些链接将导航到另一个网页，并一次跳转到其锚点。

然后，唯一有效的链接是那些仅在当前页面上找到锚点的链接，即使这些链接告诉他们转到另一页并找到对应的锚点。

以下是.php文件中包含的代码，以便整个站点的导航相同。

<html>
        <ul>
            <li><a href="#"><h2>About</h2></a></li>
            <li><a href="http://weathersbyink.com/hikc/prints/" id="closea"><h2>Prints</h2></a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/" id="closeb"><h2>Archival</h2></a></li>
            <li><a href="#"><h2>VHS &amp; Reels</h2></a></li>

<li><a href="#">Contact Us</a></li>
            <li><a href="http://weathersbyink.com/hikc/prints/index.php#pj00" id="closec" target="_parent">Standard 1HR</a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/index.php#pj05" id="closed">Shoebox Scan</a></li>
            <li><a href="#">Tape to DVD</a></li>

<li><a href="#">Blog</a></li>
            <li><a href="http://weathersbyink.com/hikc/prints/index.php#pj01" id="closee">Large Format</a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/index.php#pj06" id="closef">Single Scan</a></li>
            <li><a href="#">Repairs</a></li>

<li><a href="#">Find Us</a></li>
            <li><a href="http://weathersbyink.com/hikc/prints/index.php#pj02" id="closeg">Mounting</a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/index.php#pj07" id="closeh">Slide (Positive) Scan</a></li>
            <li><a href="#">Film to DVD</a></li>

<li><a href="#">Hire Us!</a></li>
            <li><a href="http://weathersbyink.com/hikc/prints/index.php#pj03" id="closei">Lamination</a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/index.php#pj08" id="closej">Negative Scans</a></li>
            <li><a href="#">Cassette to CD</a></li>

<li><a href="#">&nbsp;</a></li>
            <li><a href="http://print.sayhikc.com/">Order Online</a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/index.php#pj09" id="closek">CD/DVD Copy</a></li>
            <li><a href="#">&nbsp;</a></li>

<li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>

<li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>

<li><a href="#"><h2>Film</h2></a></li>
            <li><a href="#"><h2>Restorations</h2></a></li>
            <li><a href="#"><h2>Special</h2></a></li>
            <li><a href="#"><h2>Events</h2></a></li>

<li><a href="#">Develop Only</a></li>
            <li><a href="#">Photoshop I</a></li>
            <li><a href="#">Canvas Prints</a></li>
            <li><a href="#">Classes</a></li>

<li><a href="#">Single Set</a></li>
            <li><a href="#">Photoshop II</a></li>
            <li><a href="#">Aluminum</a></li>
            <li><a href="#">1-on-1 Consultation</a></li>

<li><a href="#">Double Set</a></li>
            <li><a href="#">Small Projects</a></li>
            <li><a href="#">Metalic</a></li>
            <li><a href="#">Sales</a></li>

<li><a href="#">Black &amp; White</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">Wood Transfer</a></li>
            <li><a href="#">&nbsp;</a></li>

<li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
        </ul>



===== Section: Page A ===========================================



<div class="prints01">
    <h3>Mounting</h3>
    <p>Add a unique spin to your image!</p>
    <ul>
    <li>High-quality, crisp color printing</li>
    <li>24 Hour Turn-Around</li>
    <li>Durable and Long-Lasting</li>
    <li>Professional, personal application</li>
    <li>Available in Matte and Glossy Finish</li>
    </ul>
<!-- end prints01 --></div><a id="pj03"></a>



===== Section: Page B ===========================================



<div class="prints01" style="margin-top: 12%">
    <h3>Negative Scans</h3>
    <p>Lamination is the ideal method for adding years to the life of your displayed images and graphics.</p>
    <ul>
    <li>High Gloss</li>
    <li>Maintains Image contrast &amp; Saturation</li>
    <li>Adds UV Protection</li>
    <li>Easily Cleanable</li>
    <li>24 Hour Turn-Around</li>
    </ul>
<!-- end prints01 --></div><a id="pj09"></a>

</html>

我希望这些链接可以从导航面板导航到页面A和B上的目标。

可以在http://weathersbyink.com/hikc上实时找到

Answer 1

我刚刚找到了这个答案。

“我在w3school引导程序模板中发现了此问题，该模板将该命令作为一个块的一部分，可以很好地滚动到井号。一旦我注释掉，链接就可以正常工作。”

https://stackoverflow.com/a/40722833/8836444

谢谢@charlietfl和@mike ursitti

使用页面跳转锚点的正确方法是什么？

1 个答案: