CSSは単純なタブ切り替え効果を実装します（コード付き）

この記事はCSSで簡単なタブ切り替え効果を実現する内容ですので、お困りの方は参考にしていただければ幸いです。

アンカー ポイントの考え方を使用すると、単純なタブ切り替え効果を実現できます。

ページ レイアウトとスタイル:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div>
  <a>1</a>
  <a>2</a>
  <a>3</a>
  <a>4</a>
</div> 

......

.box {
   height: 10em;
   border: 1px solid #ddd;
   overflow: hidden;
}
.list {
   line-height: 10em;
   background: #ddd;
}

コンテナは overflow:hidden で設定されており、各リストの高さはコンテナの高さと同じであるため、リストが 1 つだけであることが保証されます。常に表示されます。 3 番目のボタンなどのボタンをクリックすると、URL アドレスのアンカー チェーンが #three に変更され、ID が 3 の 3 番目のリストのアンカー位置がトリガーされます。つまり、コンテナのスクロールの高さが変更されます。リスト 3 の上端をスクロール コンテナの上端に揃えてタブ効果を実現します。

しかし、この方法にはいくつかの欠点があります。

• 第一に、コンテナの高さは固定である必要があります。

• 2 番目に、アンカー ポイントの配置によってフォームの位置変更がトリガーされます。つまり、ページがスクロールできる場合、クリック オプション ページもジャンプします

#この状況を変更するには、次の方法を使用します。ページ レイアウトは次のとおりです。

<div>
    <div>
<input>1</div>
    <div>
<input>2</div>
    <div>
<input>3</div>
    <div>
<input>4</div>
</div>
<div>
    <label>1</label>
    <label>2</label>
    <label>3</label>
    <label>4</label>
</div>

このように書くと、ページ フォームにスクロール バーがあっても、ほとんどの場合ジャンプ現象は発生しません。原理は、非表示の

<input> 入力ボックスを各リストに挿入し、タブ ボタンが 要素になり、## に #for が渡されることです。 属性は、<input> 入力ボックスの id に関連付けられています。このように、オプション ボタンをクリックすると、入力ボックスのフォーカス動作がトリガーされ、アンカーがトリガーされます。配置、およびカード切り替え効果の実装。 しかし、上記の技術を実際のプロジェクトで使用する場合、タブボタンの選択効果と一部の処理のサポートは切り離すことができません。ブラウザの外にいるときもリストはジャンプします。

関連処理は、jQuery 構文を使用すると次のようになります:

$('label.click').removeAttr('for').on('click', function() { $('.box').scrollTop(xxx); 'xxx'表示滚动数值
});

以上がCSSは単純なタブ切り替え効果を実装します（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。