Question

我使用这个简单的函数来移动具有hashNavigation的幻灯片。

所有幻灯片都有一个数据哈希，使得一个新链接（我使用swiper js库 - ＆gt; link）

<div class="swiper-slide" data-hash="red">
  <img src="/img.jpg">
</div>
<div class="swiper-slide" data-hash="blue">
   <img src="/img.jpg">
</div>

我有这个输入，点击移动幻灯片。

<input class='red' type='radio' name='product_id' id='red' value='{$p->id}'>
 <label class='red' for='red'></label>
</input>
<input class='blue' type='radio' name='product_id' id='blue' value='{$p->id}'>
 <label class='blue' for='blue'></label>
</input>

和

$(".red").click(function(e){
    window.location = "link/#red"; //this is a inside link page
});
$(".blue").click(function(e){
    window.location = "link/#blue"; //this is a inside link page
});

所有工作都很顺利但是在点击时页面也会滚动到元素。如何在没有滚动的情况下更改网址？让窗户处于相同的位置。

谢谢！

Answer 1

您使用与输入相同的ID作为图片的ID ...显然他们会发生冲突。

是的，您的标签需要一个ID才能正常工作，但我不明白为什么您需要与数据哈希中使用的ID相同的ID？难怪页面很混乱。

Swiper希望在您的网址中使用#red ID来查找正确的图片，但是您可以通过为输入使用相同的ID来覆盖它，因此它会在那里滚动。

您只需要为其中一个使用不同的ID。

单击jquery转到url但不滚动到元素

1 个答案: