CSSを使用してナビゲーションバーにタブ切り替えを実装する3つの方法

前の言葉

<p> ナビゲーションバータブはページ上で非常に一般的です この記事では、ナビゲーションバータブを実装するCSSの3つの方法を詳しく紹介します

<p>

Layout

<p>

上の図に示すように、まず始めましょう。図のモジュール全体はナビゲーションと呼ばれ、ナビゲーション タイトルとナビゲーション コンテンツで構成されます。上の図に示すレイアウト効果を実現するには、セマンティック レイアウトとビジュアル レイアウトの 2 つのレイアウト方法があります <p>

【セマンティック レイアウト】<p>

セマンティック レイアウトの観点からは、各ナビゲーション タイトルとそれに対応するナビゲーション コンテンツは、全体的な <p> である必要があります。

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}   
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;}
.navI-tit{line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{position:relative;z-index:1;}
</style>

<p class="box">
    <ul class="nav">
        <li class="navI navI_active">
            <h2 class="navI-tit">课程</h2>
            <p class="navI-txt">课程内容</p>
        </li>
        <li class="navI">
            <h2 class="navI-tit">学习计划</h2>
            <p class="navI-txt ml1">学习计划内容</p>
        </li>
        <li class="navI">
            <h2 class="navI-tit">技能图谱</h2>
            <p class="navI-txt ml2">技能图谱内容</p>
        </li>
    </ul>   
</p>

【ビジュアルレイアウト】<p>

ビジュアルレイアウトの観点から見ると、すべてのナビゲーションタイトルは 1 つのグループであり、すべてのナビゲーションコンテンツは 1 つのグループです <p>

<style>
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
.box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
.nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
.nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
.nav-txt{height: 200px;text-indent: 2em; line-height: 2;}
.nav-txtI{height: 200px;}
</style>

<p class="box">
    <nav class="nav-tit">
        <a class="nav-titI">课程</a>
        <a class="nav-titI">学习计划</a>
        <a class="nav-titI">技能图谱</a>
    </nav>
    <ul class="nav-txt">
        <li class="nav-txtI nav-txtI_active">课程内容</li>
        <li class="nav-txtI">学习计划内容</li>
        <li class="nav-txtI">技能图谱内容</li>
    </ul>
</p>

<p>

hover

ナビゲーションバーの機能は、ナビゲーションタイトルが表示されているときに表示されることです。クリック 対応するナビゲーション コンテンツ。擬似ホバーを使用して同様の効果を実現する場合は、最初のレイアウト方法であるセマンティック レイアウトを使用する方が適切です。これは、セマンティック レイアウトでは 3 つのナビゲーション コンテンツが重なっているためです。親要素 .navI に移動すると、マウスのホバー状態がトリガーされ、親要素に追加されるスタイルは position:relative;z-index:1;になります。 >。これにより、レベル z-index が増加します。子要素のナビゲーションコンテンツの階層競争では、「親要素よりも子の方が価値がある」ため、親要素のナビゲーションコンテンツが重なった状態で上位に表示されます。初期状態では、最初のナビゲーションは、マウスがナビゲーション モジュールの外に移動すると、タイトルがデフォルトの選択状態 (背景が白、下線なし) になることができず、ナビゲーション コンテンツ部分を固定できず、最初のナビゲーション コンテンツが表示されます。マウスがナビゲーションモジュールの外に出ると、ナビゲーションタイトルのスタイルは修正できず、デフォルト状態に戻ります<p>

<p>.navI时，触发鼠标的hover态，给父元素添加样式为position:relative;z-index:1;。从而提升了层级z-index。在其子元素导航内容的层级比拼中，“子凭父贵”，父元素层级高的，其导航内容在重叠状态中显示在最上面

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}   
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;}
.navI-tit{line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{position:relative;z-index:1;}
/*重点代码*/
.navI:hover{position:relative;z-index:1;}
.navI:hover .navI-tit{background:#fff;border-bottom:none;}
</style>

<p class="box">
    <ul class="nav">
        <li class="navI navI_active">
            <h2 class="navI-tit">课程</h2>
            <p class="navI-txt">课程内容</p>
        </li>
        <li class="navI">
            <h2 class="navI-tit">学习计划</h2>
            <p class="navI-txt ml1">学习计划内容</p>
        </li>
        <li class="navI">
            <h2 class="navI-tit">技能图谱</h2>
            <p class="navI-txt ml2">技能图谱内容</p>
        </li>
    </ul>   
</p>

<p>  [缺点]：初始状态时，第一个导航标题无法实现默认被选中的状态(背景白色，无下划线)；鼠标移出导航模块时，导航内容部分无法固定，显示第一个导航内容；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态

<p> 

锚点

<p>  实现导航条的关键就在于如何建立导航标题与导航内容之间的联系，而锚点就可以实现类似效果。通过点击锚点，页面生成一个哈希值，然后跳转到相应内容的位置

<p>  使用锚点技术时，使用语义布局和视觉布局都可以实现

<p>【1】使用语义布局

<p>  使用语义布局时，可以使用伪类target，通过target选择器来改变点击导航标题时，当前标题的样式。不仅如此，因为要使用兄弟选择器，所以需要改变HTML结构，将导航标题的HTML结构移到导航内容的下面

<p>  点击导航标题时，触发target伪类，改变对应的导航内容的层级z-index，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}   
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;position:relative;}
.navI-tit{position:absolute;top:0;left:0;right:0;box-sizing: border-box;line-height: 40px;height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{width: 572px;height:200px;margin-top: 40px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
.navI_active{z-index:1;}
/*重点代码*/
.navI-txt:target{position:relative;z-index:1;}
.navI-txt:target ~ .navI-tit{background:#fff;border-bottom:none;}
</style>

<p class="box">
    <ul class="nav">
        <li class="navI navI_active">
            <p class="navI-txt" id="kc">课程内容</p>
            <a class="navI-tit" href="#kc">课程</a>
        </li>
        <li class="navI">
            <p class="navI-txt ml1" id="xx">学习计划内容</p>
            <a class="navI-tit" href="#xx">学习计划</a>
        </li>
        <li class="navI">
            <p class="navI-txt ml2" id="jn">技能图谱内容</p>
            <a class="navI-tit" href="#jn">技能图谱</a>
        </li>
    </ul>   
</p>

<p>  [缺点]：初始态默认选中的导航标题样式无法设置；改变了HTML结构；锚点技术本身的局限是锚点目标会尽可能的到达可视区域上方，从而可能会生成页面跳动

<p>【2】使用视觉布局

<p>  在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容

<p>  点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果

<p>  使用伪类hover来实现改变当前导航标题样式的效果

<style>
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
.box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
.nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
.nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
.nav-txt{height: 200px;text-indent: 2em; line-height: 2;}
.nav-txtI{height: 200px;}
/*重点内容*/
.nav-txt{overflow: hidden;}
.nav-titI:hover{background-color: white;border-bottom: none;}
</style>

<p class="box">
    <nav class="nav-tit">
        <a class="nav-titI" href="#kc">课程</a>
        <a class="nav-titI" href="#xx">学习计划</a>
        <a class="nav-titI" href="#jn">技能图谱</a>
    </nav>
    <ul class="nav-txt">
        <li class="nav-txtI nav-txtI_active" id="kc">课程内容</li>
        <li class="nav-txtI" id="xx">学习计划内容</li>
        <li class="nav-txtI" id="jn">技能图谱内容</li>
    </ul>
</p>

<p>  [缺点]：初始态默认选中的导航标题样式无法设置；锚点技术本身的局限是锚点目标会尽可能的到达可视区域上方，从而可能会生成页面跳动；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态

<p> 

label

<p>  上面使用锚点技术来联系导航标题和导航内容，而label也可以实现类似的效果。label元素为input元素定义标注，建立文字标签与表单控件的关联。在label元素内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转到和标签相关的表单控件上

<p>  使用label时，使用语义布局和视觉布局都可以实现

<p>【1】使用语义布局

<p>  使用语义布局时，使用label标签来显示导航标题，且需要配合使用单选按钮<input type="radio">。使用伪类checked，通过checked选择器来改变点击导航标题时，当前标题的样式。不仅如此，因为要使用兄弟选择器，所以需要改变HTML结构，将单选按钮放在每个.navI元素里的最上层，然后设置display:none，接下来是<label>表示导航标题，最后是<p>アンカーポイント

🎜 ナビゲーションバーを実装する鍵は、ナビゲーションタイトルとナビゲーションタイトルとの接続をどのように確立するかです。ナビゲーション コンテンツとアンカー ポイントでも同様の効果を実現できます。アンカーポイントをクリックすると、ページはハッシュ値を生成し、対応するコンテンツの位置にジャンプします🎜🎜 アンカー技術を使用すると、セマンティックレイアウトとビジュアルレイアウトの両方を実現できます🎜🎜【1】セマンティックレイアウトを使用する🎜🎜 使用セマンティック レイアウト 疑似クラス target を使用し、target セレクターを使用して、ナビゲーション タイトルをクリックしたときに現在のタイトルのスタイルを変更できます。それだけでなく、兄弟セレクターを使用したいため、HTML 構造を変更して、ナビゲーション タイトルの HTML 構造をナビゲーション コンテンツの下に移動する必要があります🎜🎜 ナビゲーション タイトルをクリックすると、target 疑似クラスがトリガーされ、対応するナビゲーション コンテンツのレベル z-index が変更され、現在のナビゲーション コンテンツが 3 つのナビゲーション コンテンツの中で優先され、同時に先頭に表示されます。現在のナビゲーション タイトルのスタイル🎜

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}  
input{margin: 0;width: 0;} 
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;}
.navI-tit{display:block;line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{position:relative;width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
/*重点代码*/
.navI-radio{display:none;}
.navI-radio:checked + .navI-tit{background:#fff;border-bottom:none;}
.navI-radio:checked ~ .navI-txt{z-index:1;}
</style>

<p class="box">
    <ul class="nav">
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="kc" checked>
            <label class="navI-tit" for="kc">课程</label>            
            <p class="navI-txt">课程内容</p>
        </li>
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="xx">
            <label class="navI-tit" for="xx">学习计划</label>            
            <p class="navI-txt ml1">学习计划内容</p>
        </li>
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="jn">
            <label class="navI-tit" for="jn">技能图谱</label>            
            <p class="navI-txt ml2">技能图谱内容</p>
        </li>
    </ul>   
</p>

🎜 [欠点]: 初期状態でデフォルトで選択されているナビゲーション タイトル スタイルは設定できません。アンカー ポイント技術自体の制限は、アンカー ポイントのターゲットであることです。表示領域より上のできるだけ高い位置に到達するため、ページジャンプが発生する可能性があります🎜🎜[2] ビジュアルレイアウトを使用します🎜🎜 ビジュアルレイアウトでは、3 つのナビゲーションコンテンツは同じ親要素に属し、親要素と同じ高さを持ちます。 、およびブロックレベルの要素の配置に従って配置されます。親要素がオーバーフローおよび非表示に設定されている場合、デフォルトでは最初のナビゲーションのみが表示されます。 コンテンツ 🎜🎜 ナビゲーションタイトルをクリックすると、対応するナビゲーションコンテンツに到達します。ナビゲーション タイトル行の下に配置し、ナビゲーション切り替えの効果を実現します 🎜🎜 疑似クラス hover を使用して、現在のナビゲーション タイトル スタイルを変更する効果を実現します 🎜

<style>
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
input{margin: 0;padding: 0;border:none;}
.box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
.nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
.nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
.nav-txt{height: 200px;}
.nav-txtI{height: 200px;display:block;width: 100%;text-indent: 2em; line-height: 2;}
/*重点内容*/
.nav-txt{overflow: hidden;}
.nav-titI:hover{background-color: #fff;border-bottom:none;}
</style>

<p class="box">
    <nav class="nav-tit">
        <label class="nav-titI" for="kc">课程</label>
        <label class="nav-titI" for="xx">学习计划</label>
        <label class="nav-titI" for="jn">技能图谱</label>
    </nav>
    <nav class="nav-txt">
        <input class="nav-txtI nav-txtI_active" id="kc" value="课程内容" readonly>
        <input class="nav-txtI" id="xx" value="学习计划内容" readonly>
        <input class="nav-txtI" id="jn" value="技能图谱内容" readonly>
    </nav>
</p>

🎜 [ 欠点 ]: ナビゲーション タイトル スタイルは、初期状態のデフォルトは設定できません。アンカー ポイント テクノロジー自体の制限は、アンカー ポイントのターゲットが表示領域より上の可能な限り高い位置に到達するため、ホバー状態がクリック状態から分離される可能性があります。混乱を招く可能性があります; マウスをナビゲーション モジュールの外に移動すると、ナビゲーション タイトルのスタイルが固定できず、デフォルトの状態に戻ります 🎜🎜 🎜🎜label🎜🎜 上記は、ナビゲーション タイトルを接続するためにアンカー ポイント技術を使用していますおよびナビゲーションコンテンツ、および label 同様の効果も達成できます。 label 要素は、input 要素のラベルを定義し、テキスト ラベルとフォーム コントロールの間の関連付けを確立します。 label 要素内のテキストをクリックすると、このコントロールがトリガーされます。テキストが選択されると、label、セマンティック レイアウトとビジュアル レイアウトの両方を使用して実現できます🎜🎜【1】セマンティック レイアウトを使用する🎜🎜 セマンティック レイアウトを使用する場合、ナビゲーション タイトルを表示するには、<code>label タグを使用します。ラジオ ボタン &lt ;input type="radio"> を使用します。疑似クラス checked を使用し、checked セレクターを使用して、ナビゲーション タイトルをクリックしたときの現在のタイトルのスタイルを変更します。それだけでなく、兄弟セレクターを使用したいため、HTML 構造を変更し、各 .navI 要素の先頭にラジオ ボタンを配置して、display:none を設定する必要があります。 、続いてナビゲーション タイトルを表す <label>、最後にナビゲーション コンテンツを表す <p> 🎜<p>  点击导航标题时，触发checked伪类，改变对应的导航内容的层级z-index，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式

<style>
body,p{margin: 0;}
h2{margin: 0;font-size:100%;}
ul{margin: 0;padding: 0;list-style: none;}  
input{margin: 0;width: 0;} 
a{text-decoration: none;color:inherit;}
.box{width: 572px;border: 1px solid #999;overflow: hidden;}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}
.navI{float: left;width: 33.333%;box-sizing: border-box;}
.navI-tit{display:block;line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}
.navI-txt{position:relative;width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}
.ml1{margin-left: -100%;}
.ml2{margin-left: -200%;}
/*重点代码*/
.navI-radio{display:none;}
.navI-radio:checked + .navI-tit{background:#fff;border-bottom:none;}
.navI-radio:checked ~ .navI-txt{z-index:1;}
</style>

<p class="box">
    <ul class="nav">
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="kc" checked>
            <label class="navI-tit" for="kc">课程</label>            
            <p class="navI-txt">课程内容</p>
        </li>
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="xx">
            <label class="navI-tit" for="xx">学习计划</label>            
            <p class="navI-txt ml1">学习计划内容</p>
        </li>
        <li class="navI">
            <input class="navI-radio" name="nav" type="radio" id="jn">
            <label class="navI-tit" for="jn">技能图谱</label>            
            <p class="navI-txt ml2">技能图谱内容</p>
        </li>
    </ul>   
</p>

<p>  [缺点]：HTML结构较复杂

<p>【2】使用视觉布局

<p>  在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容

<p>  点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果

<p>  使用伪类hover来实现改变当前导航标题样式的效果

<style>
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
input{margin: 0;padding: 0;border:none;}
.box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
.nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
.nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
.nav-txt{height: 200px;}
.nav-txtI{height: 200px;display:block;width: 100%;text-indent: 2em; line-height: 2;}
/*重点内容*/
.nav-txt{overflow: hidden;}
.nav-titI:hover{background-color: #fff;border-bottom:none;}
</style>

<p class="box">
    <nav class="nav-tit">
        <label class="nav-titI" for="kc">课程</label>
        <label class="nav-titI" for="xx">学习计划</label>
        <label class="nav-titI" for="jn">技能图谱</label>
    </nav>
    <nav class="nav-txt">
        <input class="nav-txtI nav-txtI_active" id="kc" value="课程内容" readonly>
        <input class="nav-txtI" id="xx" value="学习计划内容" readonly>
        <input class="nav-txtI" id="jn" value="技能图谱内容" readonly>
    </nav>
</p>

<p>  [缺点]：初始态默认选中的导航标题样式无法设置；有时会出现页面跳动的效果；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态

<p> 

最后

<p>  上面的三种方法中，实现效果最好的是使用label标签配合radio类型的input标签，通过:checked选择器来实现

<p>  在实际应用中，使用javascript的方式来控制导航条Tab的情况更为普遍

<p>更多CSS实现导航条Tab切换的三种方法 相关文章请关注PHP中文网！