今日、防衛ステーションプロジェクトでは、特定のモジュールでタブクリック切り替えメニューバーを作成する必要があります。JsまたはjQueryを使用して実装するのは比較的簡単ですが、Jsを本当に理解していないため、CSSを使用して実装しようとしています。 CSSを使用する方法はいくつかあります。タブメニューバーの切り替え効果を実現するには、Baiduで検索しました。これが最も簡単な方法であり、純粋なCSS3でタブ切り替えメニューバーを作成するのが最も簡単な方法だと思います。次のとおりです。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab切换栏</title>
<style>
/*清除浏览器内外边距*/
*{
margin: 0;
padding: 0;
}
/*清除li前面小圆点*/
ul li{
list-style: none;
}
/*清除a标签下划线，并将字体颜色设置为红色*/
a{
text-decoration: none;
color: red;
}
/*最外层容器盒子样式*/
.tab{
display: flex;
position: relative;
width:50rem;
margin: 0 5rem;
min-height: 10rem;
padding: 1rem;
}
/*Tab菜单栏导航栏样式*/
.tab-nav{
position: absolute;
top:0;
font-size: 1.125rem;
}
.tab-nav li{
display: inline-block;
background-color:#0b9e94;
}
.tab-nav li a{
display: block;
padding:.5rem 1rem;
}
/*Tab菜单栏列表样式*/
.tab-list{
position: absolute;
width: 100%;
min-height: 7rem;
top:3rem;
background-color:#0b9e94;
color: #999999;
}
/*显示控制*/
#hot:target,#new:target{
z-index: 1;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab-nav">
<li><a href="#hot">最热</a></li>
<li><a href="#new">最新</a></li>
</ul>
<div id="hot" class="tab-list">
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
</div>
<div id="new" class="tab-list">
<ul>
<li>我是第1个人</li>
<li>我是第2个人</li>
<li>我是第3个人</li>
<li>我是第4个人</li>
<li>我是第5个人</li>
<li>我是第6个人</li>
<li>我是第7个人</li>
<li>我是第8个人</li>
<li>我是第9个人</li>
<li>我是第10个人</li>
</ul>
</div>
</div>
</body>
</html>
全体的な考え方は次のとおりです。
タブメニューバーとリストバーを大きなコンテナボックスに入れ、最も外側のコンテナボックスの高さを設定してから、位置付けによってタブナビゲーションバーとリスト表示リストの位置を固定します。メソッド、およびアンカーリンクを設定し、最後にアンカーリンクの疑似要素ターゲットのz-index属性を介して表示を制御します。
コードを使用してデモを作成する過程で小さな問題が発生しました。＃hotと#newの2つのコンテナ内のテキストは常に重複しており、アンカーリンクの疑似要素ターゲットのz-index属性は次のように見えました。発効していません。問題を検索したところ、主にタブリストのテキストと背景色を設定していないことが原因であることがわかりました。
スプレーしないでください、私は初心者です。このデモを通して、私はまだいくつかのCSS3要素と属性に精通していないことがわかりました。