js简易月份表

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .ul1 {
            width: 300px;
            height: 450px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            margin: 0 auto;
            margin-top: 50px;
            background:url(img/2.jpg);
            background-size: contain;
            border-radius: 5px 5px 0 0;
        }

        .ul1 li {
            width: 80px;
            height: 80px;
            border: 1px solid #C1CDC1;
            text-align: center;
            border-radius: 5px;
        }

        .ul1 .active {
            background:url(img/3.jpg);
            background-size: contain;
        }

        .ul1 li h4 {
            margin-top: 20px;
        }

        .ul1 li span {
            margin-top: 10px;
        }

        .ul2 {
            width: 300px;
            height: 50px;
            border-top: 0;
            margin: 0 auto;
            background:url(img/4.jpg);
            background-size: contain;
            text-align: center;
            border-radius:0 0 5px 5px ;
        }

        .ul2 li {
            width: 300px;
            height: 50px;
            background:url(img/1.jpg);
            background-size: contain;
            display: none;
            line-height: 50px;
            color: #1E90FF;
        }

        .ul2 .show {
            display: block;
        }
    </style>

<ul class='ul1'>
        <li class='a'>
            <h4>Jan</h4>
            <span>一月</span>
        </li>
        <li class='a'>
            <h4>Feb</h4>
            <span>二月</span>
        </li>
        <li class='a'>
            <h4>Mar</h4>
            <span>三月</span>
        </li>
        <li class='a'>
            <h4>Apr</h4>
            <span>四月</span>
        </li>
        <li class='a'>
            <h4>May</h4>
            <span>五月</span>
        </li>
        <li class='a'>
            <h4>Jun</h4>
            <span>六月</span>
        </li>
        <li class='a'>
            <h4>Jul</h4>
            <span>七月</span>
        </li>
        <li class='a'>
            <h4>Aug</h4>
            <span>八月</span>
        </li>
        <li class='a'>
            <h4>Sep</h4>
            <span>九月</span>
        </li>
        <li class='a'>
            <h4>Oct</h4>
            <span>十月</span>
        </li>
        <li class='a'>
            <h4>Nov</h4>
            <span>十一月</span>
        </li>
        <li class='a'>
            <h4>Dec</h4>
            <span>十二月</span>
        </li>
    </ul>
    <ul class='ul2'>
        <li>一月首阳，犹有寒霜，唯有梅花独绽花香</li>
        <li>二月花潮，初露嫩草，经冬果树初发新桃</li>
        <li>三月莺时，盎然春意，暖风携香沁人心脾</li>
        <li>四月槐序，春风化雨，景色明媚使人心愉</li>
        <li>五月鸣蜩，不觉聒噪，居高声远增添热闹</li>
        <li>六月溽暑，漫游莲湖，倏尔风来炎热消除</li>
        <li>七月兰秋，菱花娇羞，清溪波动娟好静秀</li>
        <li>八月桂秋，桂花落雨，满庭飘香心怡几许</li>
        <li>九月菊序，微凉秋雨，芙蓉出水亭亭清毓</li>
        <li>十月飞阴，木叶落影，秋风乍起片片相迎</li>
        <li>十一月龙潜，秋季走远，初冬新临凉意寒</li>
        <li>十二月清祀，深冬已至，银装素裹雪纷飞</li>
    </ul>

    <script>
        var ul3 = document.querySelectorAll('.ul1 li')
        var ul4 = document.querySelectorAll('.ul2 li')
        for (var i = 0; i < ul3.length; i++) {
            ul3[i].setAttribute('index', i);
            ul3[i].onclick = function () {
                for (var j = 0; j < ul3.length; j++) {
                    ul3[j].classList.remove('active');
                    ul4[j].className = '';
                }
                this.className += ' active';
                var m = this.getAttribute('index');
                ul4[m].className = 'show'
            }
        }
        // querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
        // setAttribute() 方法添加指定的属性，并为其赋指定的值。
        // getAttribute() 方法返回指定属性名的属性值。
    </script>