[英]How to prevent scrolling of page while using Show and Hide anchor tag?
我正在使用显示和隐藏锚标记来存储某些数据。 但是,每次我单击“显示”或“隐藏”标签时,页面都会回到顶部,并且我必须向下滚动才能看到详细信息。 如何防止这种情况,请指导我。 我正在使用javascript函数显示和隐藏细节。
<script type="text/javascript">
$(document).ready(function () {
$(".productDescription").hide();
$(".show_hide").show();
$(".hide_show").hide();
$('.show_hide').click(function () {
$(this).parent().find('.productDescription').slideToggle();
$(this).parent().find(".show_hide").hide();
$(this).parent().find(".hide_show").show();
});
$('.hide_show').click(function () {
$(this).parent().find('.productDescription').slideToggle();
$(this).parent().find(".show_hide").show();
$(this).parent().find(".hide_show").hide();
});
});
</script>
这是我的aspx页面
<div class="product clearfix"> <a href="#" class="show_hide" style="color: #FF0000" id="FD">Full Description</a>
<br /> <a href="#" class="hide_show" style="color: #FF0000" id="HFD">Hide Full Description</a>
<div class="productDescription">
<p>
<asp:Label ID="im_url" runat="server" Text='<%# Eval("description") %>'></asp:Label>
</p>
</div>
</div>
您必须使用preventDefault(防止本机行为)方法,如下所示:
$('.show_hide').click(function (ev) {
ev.preventDefault();
// Your code goes here
})
您可以尝试像这样添加preventDefault吗? 由于锚标记中有#for href,因此#会附加到url并执行锚标记的默认行为。
$('.show_hide').click(function (evt) {
evt.preventDefault();
$(this).parent().find('.productDescription').slideToggle();
$(this).parent().find(".show_hide").hide();
$(this).parent().find(".hide_show").show();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.