Javascript 停止纯CSS选项卡在选择时滚动到页面顶部

我有一个CSS/HTML格式的标签信息框，除了标签行在标签更改时滚动到网页顶部之外，它工作得非常好。这似乎是

#

目标的一项功能

我一直在寻找抑制这种现象的方法，大家一致认为这只能通过Javascript实现。我发现了一些建议，例如添加：

onclick='e.preventDefault();'

或

onclick='return false；'-显然是不

但是，每当我将
onclick=
添加到选项卡的

这是表1
Lorem ipsum dolor sit amet，是一位杰出的献身者。杜伊斯不是尼布·莫里斯

这是表2
莫比·莫莱斯蒂·莫莱斯蒂·菲利斯，非车辆乌尔纳

这是表3
Nam accumsan hendrerit lorem，欧盟智者元素faucibus a

这是表4
直径为。这是一句名言



我知道我一定错过了一些非常明显的东西。也许是我（错误地）使用了JavaScript。人们往往将它作为函数引用，而不是在所讨论的HTML上下文中引用。任何指导都将不胜感激
 与其抑制本机行为，不如通过同时删除
href
属性来更改占位符链接


href

这是定义
超文本源链接，但在HTML5中不再需要。省略
此属性创建占位符链接

看看这个，可能会有帮助。您使用复选框而不是HREF

给我们一个jsfiddle.net中的工作示例：我在其周围添加了一个div，以模拟在页面下方的方框，它在jsfiddle沙盒中的表现似乎更好，但仍然会跳跃。请查看此示例，它可能会有所帮助。您使用复选框而不是HREF。非常感谢@Neoaptt链接，在玩了一会儿之后，我使用了单选按钮，它比
#
和
:target
好得多。如果你把它作为一个答案贴出来，我会接受的。谢谢@pherris，我会查出来的。丢失
#tab1、#tab2、#tab3
hrefs不会丢失显示哪个选项卡的目标吗？是的，你是对的-我不清楚css:target是否用于显示/隐藏选项卡。Neoatt建议不要使用
a
标签（复选框将根据他发布的链接起作用）-这是一般方法-不要试图改变
a
标签的行为，使用其他东西。非常感谢@pherris我已经按照建议离开了
标签。如果有人感兴趣，这就是最终结果：
<div class=detailtabs>
 <div id=tab1> <a href="#tab1">Tab 1</a>
  <div>
    <h2 style="color:#ff0000;">This is Tab 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non nibh mauris. </p>
  </div>
 </div>

 <div id=tab2> <a href="#tab2">Tab 2</a>
  <div>
     <h2 style="color:#ff0000;">This is Tab 2</h2>
     <p>Morbi molestie molestie felis, non vehicula urna. </p> 
  </div>
 </div>

 <div id=tab3> <a href="#tab3">Tab 3</a>
  <div>
      <h2 style="color:#ff0000;">This is Tab 3</h2>
      <p>Nam accumsan hendrerit lorem, eu elementum sapien faucibus a. </p>
  </div>
 </div>

 <div id=tab4> <a href="#tab4">Tab 4</a>
  <div>
    <h2 style="color:#ff0000;">This is Tab 4</h2>
    <p>Nulla eget sollicitudin diam. Quisque dictum suscipit aliquet. </p>
  </div>
 </div>