js选项卡功能2

Dear 丶 2022-01-13 12:49 176阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选项卡(利用css中target)</title>
        <style>
             *{
                 margin:0;
                 padding: 0;
                 list-style:none ;
     
                 text-decoration: none;
             }
             .tab{
                 width: 300px;
                 height: 300px;
                 border:1px solid black;
             }
             .tab-choose{
                 width: 100%;
                 box-sizing: border-box;
                 height: 40px;
             }
             .tab-choose li{
                 width: 30%;
                 height: 40px;
                 border: 1px solid #e1e1e1;
                 float: left;
                 text-align: center;
                 line-height: 40px;
                 font-size: 14px;
                 margin-left: 2%;
             }
             .tab-con {
                 width: 100%;
                 height: 260px;
                 text-align: center;
                 line-height: 260px;
                 font-size: 16px;
             }
            .tab-con ul li{
                width: 100%;
                height: 100%;
     
            }
             .tab-con ul li {
                 display: none;
             }
             .tab-con ul li:target {
                 display: block;
                 color: red;
             }
        </style>
     
    </head>
    <body>
    <div class="tab">
        <ul class="tab-choose">
            <li><a href="#page1">选择一</a></li>
            <li><a href="#page2">选择二</a></li>
            <li><a href="#page3">选择三</a></li>
        </ul>
        <div class="tab-con">
            <ul >
                <li id="page1">内容一</li>
                <li id="page2">内容二</li>
                <li id="page3">内容三</li>
            </ul>
        </div>
    </div>
    </body>
    </html>

转载于:https://my.oschina.net/u/3759656/blog/3005829

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/dc5a8095a1f94e03bc701320bb2ccfb2.png