我想在点击标识div
的链接时显示.items
addItems
,但它无法正常工作。点击addItems
链接后,系统会显示div
.items
,页面会刷新并滚动到顶部,.items
div
会自动隐藏。你知道这是什么问题吗?
$('#addItems').click(function() {
$('.items').show("slide");
});
.items {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" class="clearfix">
<div class="form-group">
<a href="" id="addItems">Add Item</a>
</div>
<div class="items">
<h6>Items</h6>
<div class="form-group">
<label for="inputName"> Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<input type="submit" class="btn btn-outline-primary mt-3" value="Store" />
</div>
</form>
答案 0 :(得分:1)
锚链接的默认行为需要阻止自然发生。
考虑以下jQuery方法:event.preventDefault()
说明:如果调用此方法,则不会触发事件的默认操作。
例如,单击的锚点不会将浏览器带到新的URL。
参考:event.preventDefault() | jQuery API Documentation
代码段示范:
$('#addItems').click(function(event) {
event.preventDefault();
$('.items').show("slide");
console.log('no refresh');
});
&#13;
.items {
display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" class="clearfix">
<div class="form-group">
<a href="" id="addItems">Add Item</a>
</div>
<div class="items">
<h6>Items</h6>
<div class="form-group">
<label for="inputName"> Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<input type="submit" class="btn btn-outline-primary mt-3" value="Store" />
</div>
</form>
&#13;
答案 1 :(得分:1)
默认情况下,超链接元素遵循其href
属性。您将其设置为空,重新加载相同的页面。要禁用此行为,您可以将其设置为href="#"
。
$('#addItems').click(function() {
$('.items').show("slide");
});
&#13;
.items {
display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" class="clearfix">
<div class="form-group">
<a href="#" id="addItems">Add Item</a>
</div>
<div class="items">
<h6>Items</h6>
<div class="form-group">
<label for="inputName"> Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<input type="submit" class="btn btn-outline-primary mt-3" value="Store" />
</div>
</form>
&#13;
编辑要完全停用href
以便页面不滚动到顶部,您可以使用href="javascript: void 0;"
:
$('#addItems').click(function() {
$('.items').show("slide");
});
&#13;
.items {
display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" class="clearfix">
<div class="form-group">
<a href="javascript: void 0;" id="addItems">Add Item</a>
</div>
<div class="items">
<h6>Items</h6>
<div class="form-group">
<label for="inputName"> Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<input type="submit" class="btn btn-outline-primary mt-3" value="Store" />
</div>
</form>
&#13;
答案 2 :(得分:0)
只需从href=""
元素中删除<a>
,最佳做法是使用role="button"
属性告诉搜索引擎这是一个按钮。
总的来说,代码将是:
<form method="post" class="clearfix">
<div class="form-group">
<a role="button" id="addItems">Add Item</a>
</div>
<div class="items">
<h6>Items</h6>
<div class="form-group">
<label for="inputName"> Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<input type="submit" class="btn btn-outline-primary mt-3" value="Store"/>
</div>
</form>
答案 3 :(得分:0)
看起来浏览器正在尝试关注<a>
标记的href属性。你可以尝试一些事情:
<a>
替换为<span>
标记,并将其设置为看起来像锚标记在您的函数中添加e.preventDefault
以阻止页面尝试重新加载。看起来像这样:
$('#addItems').click(function(e){
$('.items').show("slide");
e.preventDefault();
});
答案 4 :(得分:0)
问题出在您的href
中,默认情况下会将用户重定向到另一个页面。删除它或更改它,例如<button>
现在可行了
$('#addItems').click(function() {
$('.items').show("slide");
});
&#13;
.items{
display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" class="clearfix">
<div class="form-group">
<a id="addItems"><u>Add Item</u></a>
</div>
<div class="items">
<h6>Items</h6>
<div class="form-group">
<label for="inputName"> Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<input type="submit" class="btn btn-outline-primary mt-3" value="Store"/>
</div>
</form>
&#13;