Question

我想在点击标识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>

Answer 1

锚链接的默认行为需要阻止自然发生。

考虑以下jQuery方法：event.preventDefault()

说明：如果调用此方法，则不会触发事件的默认操作。

例如，单击的锚点不会将浏览器带到新的URL。

参考：event.preventDefault() | jQuery API Documentation

代码段示范：

＆＃13;

$('#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;

Answer 2

默认情况下，超链接元素遵循其href属性。您将其设置为空，重新加载相同的页面。要禁用此行为，您可以将其设置为href="#"。

＆＃13;

$('#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;"：

＆＃13;

$('#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;

Answer 3

只需从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>

Answer 4

看起来浏览器正在尝试关注<a>标记的href属性。你可以尝试一些事情：

将<a>替换为<span>标记，并将其设置为看起来像锚标记
在您的函数中添加e.preventDefault以阻止页面尝试重新加载。看起来像这样：

$('#addItems').click(function(e){ $('.items').show("slide"); e.preventDefault(); });

Answer 5

问题出在您的href中，默认情况下会将用户重定向到另一个页面。删除它或更改它，例如<button>

现在可行了

＆＃13;

$('#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;

链接点击显示div无法正常工作

5 个答案: