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

时间:2018-01-03 20:27:05

标签: jquery css

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

5 个答案:

答案 0 :(得分:1)

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

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

  

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

     

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

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

代码段示范:

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;

编辑要完全停用href以便页面不滚动到顶部,您可以使用href="javascript: void 0;"

&#13;
&#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;
&#13;
&#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属性。你可以尝试一些事情:

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

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

答案 4 :(得分:0)

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

现在可行了

&#13;
&#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;
&#13;
&#13;