ホームページ >ウェブフロントエンド >H5 チュートリアル >タブページ切り替え効果を実現する純粋な CSS
タブページ切り替え効果を実現する純粋な CSS
- php中世界最好的语言オリジナル
- 2018-03-20 13:23:024609ブラウズ
今回はタブページ切り替え効果を実現するための純粋なCSSを紹介します。 タブページ切り替え効果を実現するために純粋なCSSを使用するための注意事項は何ですか。以下は実際的なケースです。
最近、ページをカットするときにタブ切り替え部分があったので、jsを使いたくないので、純粋なCSSセレクターを使用して切り替え効果を実現できないか考えました。検索してみると、大きく分けて以下の3つの書き方があります。 1. :hover セレクターを使用します 欠点: マウスが要素上にある場合にのみ効果があり、デフォルトでは特定の要素を選択して表示する効果は得られません2. a タグ + :target selector欠点: アンカー ポイントは選択した要素をページの先頭までスクロールするため、位置が切り替わるたびにアンカー ポイントを移動する必要があり、エクスペリエンスが非常に悪くなります。 3. 効果を実現するために、ラベルとラジオの間のバインディング関係を使用し、ラジオが選択されている場合に :checked を使用します 欠点: HTML の構造要素はより複雑です
- ラベルとラジオのバインド: ID と属性のバインドは言うまでもありません。
- ラジオ ボタンを非表示にする: 私が見た方法は、表示を設定することです。 、
- 冗長なタブページを非表示にする: 上記と同じ方法で、z-index を介して階層関係を設定して相互にブロックすることもできます。
- デフォルトの項目を設定します: デフォルトのボタンにchecked="checked"属性を追加します
- 選択効果を設定します: +セレクターと~セレクターを使用して、対応する要素が選択されたときの下のタブページのスタイルを設定します選択されたエフェクト
/* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
input[type="radio"]:checked+.test-label {
/* 为了修饰存在的边框背景属性 */
border-color: #cbcccc;
border-bottom-color: #fff;
background: #fff;
/* 为了修饰存在的层级使下边框遮挡下方p的上边框 */
z-index: 10;
}
/* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
input[type="radio"]:checked~.tab-box {
/* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
z-index: 5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS实现Tab切换效果</title>
<style>
ul {
margin: 0;
padding: 0;
}
.clearfloat {
zoom: 1;
}
.clearfloat::after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.tab-list {
position: relative;
}
.tab-list .tab-itom {
float: left;
list-style: none;
margin-right: 4px;
}
.tab-itom .test-label {
position: relative;
display: block;
width: 85px;
height: 27px;
border: 1px solid transparent;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
line-height: 27px;
text-align: center;
background: #e7e8eb;
}
.tab-itom .tab-box {
/* 设置绝对定位方便定位相对于tab-list栏的位置，同时为了可以使用z-index属性 */
position: absolute;
left: 0;
top: 28px;
width: 488px;
height: 248px;
border: 1px solid #cbcccc;
border-radius: 5px;
border-top-left-radius: 0px;
background: #fff;
/* 设置层级最低方便选中状态遮挡 */
z-index: 0;
}
/* 用绝对定位使按钮脱离文档流，透明度设置为0将其隐藏 */
input[type="radio"] {
position: absolute;
opacity: 0;
}
/* 利用选择器实现 tab切换 */
/* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
input[type="radio"]:checked + .test-label {
/* 为了修饰存在的边框背景属性 */
border-color: #cbcccc;
border-bottom-color: #fff;
background: #fff;
/* 为了修饰存在的层级使下边框遮挡下方p的上边框 */
z-index: 10;
}
/* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
input[type="radio"]:checked ~ .tab-box {
/* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
z-index: 5;
}
</style>
</head>
<body class="clearfloat">
<ul class="tab-list clearfloat">
<li class="tab-itom">
<input type="radio" id="testTabRadio1" class="test-radio" name="tab" checked="checked">
<label class="test-label" for="testTabRadio1">选项卡一</label>
<p class="tab-box">
111111111111
</p>
</li>
<li class="tab-itom">
<input type="radio" id="testTabRadio2" class="test-radio" name="tab">
<label class="test-label" for="testTabRadio2">选项卡二</label>
<p class="tab-box">
2222222222222
</p>
</li>
<li class="tab-itom">
<input type="radio" id="testTabRadio3" class="test-radio" name="tab">
<label class="test-label" for="testTabRadio3">选项卡三</label>
<p class="tab-box">
33333333333333
</p>
</li>
</ul>
</body>
</html>。 この記事の事例を読んだことがあるかと思いますが、この方法をマスターした後は、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
max-width と min-width の使用に関するヒント
Mac システムで MySQL の root パスワードをリセット
以上がタブページ切り替え効果を実現する純粋な CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。