我使用这个简单的函数来移动具有hashNavigation的幻灯片。
所有的幻灯片都有一个数据哈希,使得一个新的链接(我使用swiper js库 - > 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
});
所有工作都很好但是在点击时页面也会滚动到元素。如何在没有滚动的情况下更改网址?只是让窗户处于相同的位置。
谢谢!
您输入的ID与图像的ID相同......显然它们会发生冲突。
是的,您需要一个ID才能使您的标签正常工作,但我不明白为什么您需要与数据哈希中使用的ID相同的ID?难怪页面很混乱。
Swiper希望在您的URL中使用#red
ID来查找正确的图像,但是您可以通过为输入使用相同的ID来覆盖它,因此它会在那里滚动。
您只需要为其中一个使用不同的ID。