关于选择卡

//css部分
<style>
        *{
            padding: 0 ;
            margin: 0;
        }
        ul,ol,li {
            list-style-type: none;
        }
        div{
            width:400px;
            height: 400px;
            display: flex;
            flex-direction: column;
            margin: 50px auto;
            border: 1px solid red;

        }
        ul{
            height: 50px;
            display: flex;

        }
        ul>li{
            /* 在父盒子里占取得份数 */
            flex:1;
            border: 1px solid pink;
            background-color: rgb(50, 73, 219);
            text-align: center;
            line-height: 50px;
            color: aliceblue;
            font-size: 30px;
            /* 调整光标放在按钮上后 变成小手光标 */
            cursor: pointer;
        }
        ul> li.gaoliang{
            background-color: rgb(116, 244, 12);
        }
        ol{
            position: relative;
            flex: 1;
        }
        ol>li{
            width: 100%;
            height: 100%;
            background: rgb(225, 17, 225);
            text-align: center;
            line-height: 350px;
            font-size: 50px;
            color: aliceblue;
            position: absolute;
            top: 0;
            left: 0;
            display: none ;
            
        }
        ol>li.gaoliang{
            display: block;
        }
    </style>

利用弹性盒满足一下要求

 <div>
        <ul>
            <li class="gaoliang">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="gaoliang">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

 js部分

  <script>
        // 获取元素
        var anniu=document.querySelectorAll('ul>li');
        var hezi=document.querySelectorAll('ol>li');
        
        // 给所有按钮添加点击事件
        // 使用了foreach方法 此方法同for循环方法道理想同，
        // foreach是遍历anniu数组里的所有数组。
        // item  项目   
        //index  索引
        //两个参数为    anniu[1]数组的参数

        
        anniu.forEach(function(item,index){
            //给按钮添加点击事件
            // item.className='';
            item.onclick=function(){
                //遍历所有的盒子全部取消高亮状态
                anniu.forEach(function(i,j){
                    i.className='';
                    hezi[j].className='';

                })
                item.className='gaoliang';
                hezi[index].className='gaoliang';
            }
        })

    </script>

补充知识

foreach 语法：

1. forEach方法中的function回调有三个参数：

2. 第一个参数是遍历的数组内容，

3. 第二个参数是对应的数组索引，

4. 第三个参数是数组本身

　[ ].forEach(function(value,index,array){

　

　　　　//code something

　　　　

　　});

var arr = [1,2,3,4];

var sum =0;

arr.forEach(function(value,index,array){

 array[index] == value; //结果为true

 sum+=value;

 });

console.log(sum); //结果为 10