tab选项卡的基本实现

来源：互联网发布：淘宝手机维修骗局编辑：程序博客网时间：2024/06/03 15:35
不多说，直接上代码，比较简单
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        li{            list-style: none;        }        #tab>ul{            display: flex;        }        #tab>ul>li{            flex: 1;            text-align: center;            cursor: pointer;        }        #tabCon_1{            display: none;        }        #tabCon_2{            display: none;        }        #tabCon_3{            display: none;        }    </style>    <script>        function change(num) {            for(i=0;i<=3;i++) {                document.getElementById('tabCon_'+i).style.display='none';                document.getElementById('tabCon_'+num).style.display='block'            }        }    </script></head><body>    <div>        <div id="tab">            <ul>                <li onclick="change(0)">标题一</li>                <li onclick="change(1)">标题二</li>                <li onclick="change(2)">标题三</li>                <li onclick="change(3)">标题四</li>            </ul>        </div>        <div>            <ul id="tabCon_0">                <li>项目一</li>                <li>项目二</li>                <li>项目三</li>                <li>项目四</li>            </ul>        </div>        <div>            <ul id="tabCon_1">                <li>相爱更难一</li>                <li>东条英机二</li>                <li>但是仍然推荐三</li>                <li>是让人听见</li>            </ul>        </div>        <div>            <ul id="tabCon_2">                <li>但是一同进步 一</li>                <li>虽然挺好二</li>                <li>双方通过合适三</li>                <li>瘦肉汤四</li>            </ul>        </div>        <div>            <ul id="tabCon_3">                <li>都会有一</li>                <li>UI二</li>                <li>一三</li>                <li>规律四</li>            </ul>        </div>    </div></body></html>
阅读全文
0 0