js选项卡功能2

最新推荐文章于 2022-11-10 21:25:35 发布

weixin_34290390

最新推荐文章于 2022-11-10 21:25:35 发布

阅读量65

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3759656/blog/3005829

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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