文章/答案/技术大牛

发布

社区首页 >问答首页 >禁用ancor 'a‘标记的默认设置

问禁用ancor 'a‘标记的默认设置
EN

Stack Overflow用户

提问于 2020-09-17 05:17:42

回答 2查看 353关注 0票数 2

我有像这样的滚动div图像

HTML代码

<div class="side">
      <div class="data" id="data-1">
        <img src="https://images.unsplash.com/photo-1600247354058-a55b0f6fb720?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
        <span> ID = data-1</span>
        <hr>
      </div>
      <div class="data" id="data-2">
        <img src="https://images.unsplash.com/photo-1599687350452-f60014809d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
        <span> ID = data-2</span>
        <hr>
      </div>
      ...
   </div>

CSS代码

.side{
      display: block;
      background: salmon;
      width: 350px;
      height: 100vh;
      overflow: auto;
    }
.side img{
      display: block;
      padding: 10px;
      width: 150px;
      height: 150px;
      object-fit: cover;
      object-position: center;
    }

每个图像都有一个独特的id，如id='data-1'。

在此下面，我有一个链接到每个图像HTML代码。

<div>
      <ul>
        <li>
          <a href="#data-1">Link to image id data-1</a>
        </li>
        <li>
          <a href="#data-2">Link to image id data-2</a>
        </li>
        <li>
          <a href="#data-3">Link to image id data-3</a>
        </li>
        <li>
          <a href="#data-4">Link to image id data-4</a>
        </li>
        <li>
          <a href="#data-5">Link to image id data-5</a>
        </li>
      </ul>
    </div>

默认情况下，当我单击一个链接时，窗口页面将处于顶部。这就是我想要避免的

我想要的结果是数据仍然在div滚动页的顶部，但是windows页面不会到达任何地方。

javascript

html

jquery

css

回答 2

Stack Overflow用户

发布于 2020-09-17 05:34:23

如果要防止锚标记的默认行为，则需要将单击事件绑定到锚标记并调用event.preventDefault()。

$('a').click(function(event){
    event.preventDefault();
})

.side{
  display: block;
  background: salmon;
  width: 350px;
  height: 100vh;
  overflow: auto;
}
.side img{
  display: block;
  padding: 10px;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side">
    <div class="data" id="data-1">
        <img src="https://images.unsplash.com/photo-1600247354058-a55b0f6fb720?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
        <span> ID = data-1</span>
        <hr>
    </div>
    <div class="data" id="data-2">
        <img src="https://images.unsplash.com/photo-1599687350452-f60014809d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
        <span> ID = data-2</span>
        <hr>
    </div>
    ...
</div>
<div>
    <ul>
        <li>
          <a href="#data-1">Link to image id data-1</a>
        </li>
        <li>
          <a href="#data-2">Link to image id data-2</a>
        </li>
        <li>
          <a href="#data-3">Link to image id data-3</a>
        </li>
        <li>
          <a href="#data-4">Link to image id data-4</a>
        </li>
        <li>
          <a href="#data-5">Link to image id data-5</a>
        </li>
    </ul>
</div>

票数 1

Stack Overflow用户

发布于 2020-09-17 06:13:27

第一方法

若要在return false中添加，请单击()按钮的方法。

 <a href="#data-1" onclick="return false">Link to image id data-1</a>

.side{
  display: block;
  background: salmon;
  width: 350px;
  height: 100vh;
  overflow: auto;
}
.side img{
  display: block;
  padding: 10px;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
}

<div class="side">
  <div class="data" id="data-1">
    <img src="https://images.unsplash.com/photo-1600247354058-a55b0f6fb720?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
    <span> ID = data-1</span>
    <hr>
  </div>
  <div class="data" id="data-2">
    <img src="https://images.unsplash.com/photo-1599687350452-f60014809d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
    <span> ID = data-2</span>
    <hr>
  </div>
  ...
</div>

<div>
  <ul>
    <li>
      <a href="#data-1" onclick="return false">Link to image id data-1</a>
    </li>
    <li>
      <a href="#data-2" onclick="return false">Link to image id data-2</a>
    </li>
    <li>
      <a href="#data-3" onclick="return false">Link to image id data-3</a>
    </li>
    <li>
      <a href="#data-4" onclick="return false">Link to image id data-4</a>
    </li>
    <li>
      <a href="#data-5" onclick="return false">Link to image id data-5</a>
    </li>
  </ul>
</div>

第二方法

若要在event.preventDefault()中添加，请单击()按钮的方法。

 <a href="#data-1" onclick="event.preventDefault()">Link to image id data-1</a>

.side{
  display: block;
  background: salmon;
  width: 350px;
  height: 100vh;
  overflow: auto;
}
.side img{
  display: block;
  padding: 10px;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
}

<div class="side">
  <div class="data" id="data-1">
    <img src="https://images.unsplash.com/photo-1600247354058-a55b0f6fb720?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
    <span> ID = data-1</span>
    <hr>
  </div>
  <div class="data" id="data-2">
    <img src="https://images.unsplash.com/photo-1599687350452-f60014809d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
    <span> ID = data-2</span>
    <hr>
  </div>
  ...
</div>

<div>
  <ul>
    <li>
      <a href="#data-1" onclick="event.preventDefault()">Link to image id data-1</a>
    </li>
    <li>
      <a href="#data-2" onclick="event.preventDefault()">Link to image id data-2</a>
    </li>
    <li>
      <a href="#data-3" onclick="event.preventDefault()">Link to image id data-3</a>
    </li>
    <li>
      <a href="#data-4" onclick="event.preventDefault()">Link to image id data-4</a>
    </li>
    <li>
      <a href="#data-5" onclick="event.preventDefault()">Link to image id data-5</a>
    </li>
  </ul>
</div>

有关防止浏览器操作的更多信息。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63931678

复制

相似问题

问禁用ancor 'a‘标记的默认设置
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用ancor 'a‘标记的默认设置EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用ancor 'a‘标记的默认设置
EN