选项卡

2020-01-01 21:01:25 作者：互联网

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>选项卡</title>
    <style type="text/css">
        ul li{
            list-style-type: none;
            float: left;
            padding-left: 60px;
        }
        .yin{
            display: none;
        }
        .xian{
            color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="one1">11</div>
        <div id="one2" class="yin">22</div>
        <div id="one3" class="yin">33</div>
        <ul>
            <li id="one_1" class="xian" onclick="xuanxiang('one',1,3)">1</li>
            <li id="one_2" onclick="xuanxiang('one',2,3)">2</li>
            <li id="one_3" onclick="xuanxiang('one',3,3)">3</li>
        </ul>
    </div>
    <script type="text/javascript">
        function xuanxiang(name,dangqian,zong){
            for(var i=1;i<=zong;i++){
                var li=document.getElementById(name+'_'+i);
                var div=document.getElementById(name+i);
                li.className=i==dangqian?"xian":"";
                div.style.display=i==dangqian?"block":"none";
            }
        }
    </script>
</body>
</html>

标签：none,选项卡,color,float,xian,left
来源： https://www.cnblogs.com/yueranran/p/12129885.html