Question

我在CSS / HTML中有一个选项卡式信息框，除了每次更改选项卡时滚动到网页顶部的选项卡行外，它都能正常工作。看来这是#目标的一个功能。

我已经找到了压制这种方法的方法，并且似乎只能通过Javascript来达成共识。我找到了一些建议，例如添加：

onclick='e.preventDefault();'

或

onclick='return false;' - 显然是禁忌。

但是每当我向选项卡的onclick=元素添加<a>时，它都会停止标签的工作，而不是仅仅抑制屏幕跳转。

选项卡的HTML如下所示（我省略了CSS，因为我看不到它太相关，因为标签看起来很好，我可以在需要时发布它）：

<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>

我知道我必须遗漏一些非常明显的东西。也许是我（误）使用JavaScript。它倾向于被人们引用作为函数，而不是在所讨论的HTML的上下文中。任何指导将不胜感激。

Answer 1

您可以通过同时删除href属性来更改为占位符链接，而不是抑制本机行为。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

href

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

Answer 2

检查一下，它可能会有所帮助。您使用复选框而不是hrefs。

http://cssdeck.com/labs/pure-css3-slideshow-without-page-jump

在选择

2 个答案: