純粋なCSSタブが選択時にページの先頭にスクロールしないようにする

Question

タブが変更されるたびに、タブ行がスクロールして離れていることを除いて、CSS/HTMLにタブ付きの情報ボックスがあります。これは#ターゲットの機能です。

私はこれを抑圧する方法を探しており、コンセンサスはJavascriptでしかできないようだと思われる。私は、たとえば追加するために、いくつかの提案を発見した：

onclick='e.preventDefault();' 

または

onclick='return false;'

- ノーノー明らかに。

ただし、onclick=をタブの<a>要素に追加すると、画面ジャンプを抑止するのではなく、タブが全く機能しなくなります。

（私はタブが見えるよう、それはあまりにも関連していることを確認し、罰金に振る舞うことができないとして、私はCSSを省略している、必要であれば、私はそれを投稿することができます）、次のようにタブのHTMLは次のとおりです。

<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

これを確認してください。 hrefsではなくチェックボックスを使用します。

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

Answer 2

ネイティブの動作を抑制する代わりに、href属性をすべて削除することで、プレースホルダリンクに変更しないでください。

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

のhref

これは ハイパーテキスト・ソースのリンクを定義するアンカーのための単一の必須属性ではなかったが、もはやHTML5で必要とされます。 を省略すると、この属性はプレースホルダリンクを作成します。