单页链接在 wordpress 网站中不起作用答案

【问题标题】：Single page links are not working in wordpress website单页链接在 wordpress 网站中不起作用
【发布时间】：2016-07-07 14:43:13
【问题描述】：

我的网站出现了一些奇怪的问题。我已将一些指向我的网站主页的链接添加到另一个页面。像这样的

www.fsfsdafsdafdsafsadf/#pro1
www.fsfsdafsdafdsafsadf/#pro2
www.fsfsdafsdafdsafsadf/#pro3
www.fsfsdafsdafdsafsadf/#pro4

现在，当我点击任何链接时，它会在我点击的任何链接上将我发送到 div pro1。请同时检查该页面的 html

<!--  section  1  image-->
<div id="pro2" name="pro2">
    <div class="inner-image-width">
        <div class="inner-left">
            <div class="titleinner">Unlimited possibilities   </div>
            Some text
        </div>
    <div class="inner-right">
        <img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/06/product1.jpg"  alt="product image1">
    </div>
</div>
</div>

<!--  section  1  no image-->
<div id="pro1" name="pro1">
<div class="inner-image-width">
<div ><div class="titleinner">Boost in revenue </div>

一些文字

<!--  section  2  image-->
<div id="p5">
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Improved customer experience  </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product4.jpg"  alt="product image1"></div>
</div>
</div>

<!--  section  2  no image-->
<div class="inner-image-width">
<div>
<div class="titleinner">Confidence in security  </div>
Some text</div>
</div>

<!--  section  3 image-->
<div class="inner-image-width">
<div class="inner-left">
<img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product3.jpg"  alt="product image1">
</div>
<div class="inner-right"><div class="titleinner">Happier staff   </div>
Some text</div>
</div>

<!--  section  3 no image-->
<div class="inner-image-width">
<div><div class="titleinner">Optimized marketing campaigns  </div>
Some text 
</div>
</div>

<!--  section 4  image-->
<div id="pro3" name="pro3" onlclick="window.location.hash = '#pro3'";>
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Secure payments  </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product6.jpg"  alt="product image1"></div>
</div>
</div>

<!--  section  4  no image-->
<div id="pro4" name="pro4">
<div class="inner-image-width">
<div><div class="titleinner">Fun entertainment   </div>
Some text</div>
</div>
</div>

<!--  section  5  image-->
<div id="pro6" name="pro6">
<div class="inner-image-width">
<div class="inner-left">
<img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product5.jpg"  alt="product image1">
</div>
<div class="inner-right"><div class="titleinner">Reduced operating costs    </div>
Some text</div>
</div>
</div>

<!--  section  5  no image-->
<div class="inner-image-width">
<div>
<div class="titleinner">Immediate improvements </div>
Some text</div>

</div>

<!--  section 6  image-->
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Increased brand loyalty   </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product2.jpg"  alt="product image1"></div>
</div>


<!--  section  6 no image-->
<div class="inner-image-width">

<div><div class="titleinner">Minimal risk  </div>
Some text</div>
</div>

<div style="font-size:24px;"><a href="http://fsfsdafsdafdsafsadf/contact/" target="_blank">Contact us</a> Some text</div>

我尝试了 stackoverflow 的所有解决方案，但没有任何效果。有人可以帮我吗

【问题讨论】：

哈希链接用于同一页面导航。您想在这里实现什么目标？
哈希链接应该在新页面中打开，并且应该关注特定的 div @MohitBhardwaj
你能在这里分享你的网站链接吗？也可能是页面链接示例？
如果您的网站链接 fsfsdafsdafdsafsadf/contact 则无需放置整个链接，只需添加这个联系我们与 /#pro1/ 一样打算用。否则，将您的永久链接重置为默认值，然后再次保存，转到永久链接并设置为 %postname %
您需要为该页面添加链接，然后将#pro1 附加到该页面。目前，我认为您只添加了 #pro1 部分，这将导致它在当前页面上查找。网站链接会很有帮助。

标签： javascript php jquery html wordpress

【解决方案1】：

你只需使用这个：

<a href="#pro1">Pro 1</a>

【讨论】：

最好在您发布的代码中添加解释作为答案，这样可以帮助访问者理解为什么这是一个好的答案。

【解决方案2】：

因为您在 URL 中使用了书签（#hushtag）。

查看HTML Links - Create a Bookmark

HTML 书签用于允许读者跳转到特定部分一个网页。

如果您的网站页面较长，则书签很实用。

要制作书签，您必须先创建书签，然后添加一个链接到它。

当链接被点击时，页面将滚动到带有书签。

在你的情况下，

www.fsfsdafsdafdsafsadf/#pro1 -> click this link will jump to div #pro1

www.fsfsdafsdafdsafsadf/#pro2 -> click this link will jump to div #pro2

www.fsfsdafsdafdsafsadf/#pro3 -> click this link will jump to div #pro3

www.fsfsdafsdafdsafsadf/#pro4 -> click this link will jump to div #pro4

基本上，您的 URL 书签 (#hushtag) 可以正常工作。

如果您想链接到另一个页面，请避免使用标签，可能是这样的：

www.fsfsdafsdafdsafsadf/pro1.php -> 点击此链接将链接到“pro1.php”

像这样：

<a href="http://www.fsfsdafsdafdsafsadf/pro1.php">link text</a>
<a href="pro1.php">link text</a>

【讨论】：