溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css實(shí)現(xiàn)Tab切換的方法

發(fā)布時間：2020-08-26 09:13:45 來源：億速云 閱讀：178 作者：小新 欄目：web開發(fā)

小編給大家分享一下css實(shí)現(xiàn)Tab切換的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

方法一、利用a標(biāo)簽的錨點(diǎn)實(shí)現(xiàn)tab切換

代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>cssTab切換2</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        .tab{
            width: 300px;
            height: 300px;
            margin: 30px auto;
            overflow: hidden;
        }
        .nav{
            height: 30px
        }
        .content{
            height: 270px;
            overflow: hidden;
        }
        .cont{
            height: 270px;
        }
        #the1{
            background: green;
        }
        #the2{
            background: blue;
        }
    </style>
</head>
<body>
<div class="tab">
    <div class="nav">
        <a href="#the1">ONE</a>
        <a href="#the2">TWO</a>
    </div>
    <div class="content">
        <div id="the1" class="cont">第一張</div>
        <div id="the2" class="cont">第二張</div>
    </div>
</div>
</body>
</html>

（學(xué)習(xí)視頻推薦：css視頻教程）

方法二、利用radio按鈕和:checked選擇器

代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>純css實(shí)現(xiàn)tab切換</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .tab{
            width: 300px;
            height: 150px;
            margin-left: 30px;
            margin-top: 30px;
            border: 1px solid #eee;
            position: relative;
            overflow: hidden;
        }
        input[type='radio']{
            display: none;
        }
        .tab label{
            display: block;
            cursor: pointer;
            position: absolute;
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #eee;
        }
        .label-1{
            left: 0;
            top: 0;
        }
        .label-2{
            left: 60px;
            top: 0;
        }
        input[type='radio']:checked~div[class^='mod']{
            display: block;
        }
        input[type='radio']:checked~label{
            background: orange;
        }
        [class^='mod']{
            position: absolute;
            top: 40px;
            left: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div>
            <input type="radio" id="r-1" name="tab" checked>
            <label for="r-1" class="label-1">第一張</label>
            <div class="mod-1">
                <ul>
                    <li>275萬購昌平鄰鐵三居</li>
                    <li>總價20萬買一居</li>
                    <li>200萬內(nèi)購五環(huán)三居</li>
                    <li>北京首現(xiàn)零首付樓盤</li>
                </ul>
            </div>
        </div>
        <div>
            <input type="radio" id="r-2" name="tab">
            <label for="r-2" class="label-2">第二張</label>
            <div class="mod-2">
                <ul>
                    <li>新中式的酷色溫情</li>
                    <li>深圳房價大跌,每平8W</li>
                    <li>800萬買沙井三房</li>
                    <li>寶安房價平均900W</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

以上是css實(shí)現(xiàn)Tab切換的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手