时间戳

首页 > 解决方案 > 在不使用 jQuery 的情况下单击标签 a 时禁用滚动

html - 在不使用 jQuery 的情况下单击标签 a 时禁用滚动

问题描述

这是我在点击时生效的代码。

当窗口有滚动条并且选项卡内容不在顶部时，当我单击选项卡标题时，我会看到窗口滚动。我不想要这个。

如何在不使用 jquery 的情况下防止滚动？

我已经添加.contents-above了.contents-belowinline 样式，因此滚动会出现在运行代码段

.tab div {
  display: none;
}

.tab div:target {
  display: block;
}
<div class="contents-above" style="height: 5em;">...</div>

<div class="tab">
  <div id="link1">
    <h3>Content to Link 1</h3>
    <p>Hello World!</p>
  </div>

  <div id="link2">
    <h3>Content to Link 2</h3>
    <h4>Great success!</h4>
  </div>

  <div id="link3">
    <h3>Content to Link 3</h3>
    <p>Yeah!</p>
  </div>
</div>

<div class="tab">

  <a href="#link1">Link 1</a>
  <a href="#link2">Link 2</a>
  <a href="#link3">Link 3</a>

</div>

<div class="contents-below" style="height: 5em;">...</div>

标签： htmlcssscroll

解决方案

当您单击带有锚点的链接时，页面会滚动到该锚点并变为:target. 您依靠它来显示选项卡会在单击标题或指向它们的其他链接时滚动到选项卡。

您可以通过将目标锚定在隐藏元素上来避免这种情况，然后使用 CSS 兄弟规则将选项卡设置为可见

.somestufftoscroll {
  height: 36em;
  background: gray;
}

.tab div {
  display: none;
}

.tab .tab-target:target+div {
  display: block;
}
<div class="linksontop">

  <a href="#linktarget-1">Link 1</a>
  <a href="#linktarget-2">Link 2</a>
  <a href="#linktarget-3">Link 3</a>

</div>

<div class="somestufftoscroll">
  tabs below this area
</div>

<div class="tab">
  <div id="linktarget-1" class="tab-target" hidden></div>
  <div id="link1">
    <h3>Content to Link 1</h3>
    <p>Hello World!</p>
  </div>

  <div id="linktarget-2" class="tab-target" hidden></div>
  <div id="link2">
    <h3>Content to Link 2</h3>
    <h4>Great success!</h4>
  </div>

  <div id="linktarget-3" class="tab-target" hidden></div>
  <div id="link3">
    <h3>Content to Link 3</h3>
    <p>Yeah!</p>
  </div>
</div>

<div class="tab">

  <a href="#linktarget-1">Link 1</a>
  <a href="#linktarget-2">Link 2</a>
  <a href="#linktarget-3">Link 3</a>

</div>

你的命名也令人困惑

我建议改为：

.somestufftoscroll {
    height: 36em;
    background: gray;
}

.tab-contents {
    display: none;
}

.tabs-contents .tab-target:target + .tab-contents {
    display: block;
}
<div class="top-links">
  <a href="#tabtarget-1">Link to tab 1</a>
  <a href="#tabtarget-2">Link to tab 2</a>
  <a href="#tabtarget-3">Link to tab 3</a>
</div>

<div class="somestufftoscroll">
  <p>Tabs below this area</p>
  <p><em>This is here to test scrolling</em></p>
</div>

<div class="tabs-contents">
  <div id="tabtarget-1" class="tab-target" hidden></div>
  <div id="tab1" class="tab-contents">
    <h3>Content to Link 1</h3>
    <p>Hello World!</p>
  </div>

  <div id="tabtarget-2" class="tab-target" hidden></div>
  <div id="tab2" class="tab-contents">
    <h3>Content to Link 2</h3>
    <h4>Great success!</h4>
  </div>

  <div id="tabtarget-3" class="tab-target" hidden></div>
  <div id="tab3" class="tab-contents">
    <h3>Content to Link 3</h3>
    <p>Yeah!</p>
  </div>
</div>

<div class="tabs">

  <a href="#tabtarget-1">Tab 1</a>
  <a href="#tabtarget-2">Tab 2</a>
  <a href="#tabtarget-3">Tab 3</a>

</div>

推荐阅读