JQ应用

body

<div id="box">
            <ul>
                <li class="active">
                    <h2>1</h2>
                    <p>Jan</p>
                </li>
                
                <li>
                    <h2>2</h2>
                    <p>Jan</p>
                </li>
                <li>
                    <h2>3</h2>
                    <p>Jan</p>
                </li>
                <li>
                    <h2>4</h2>
                    <p>Jan</p>
                </li>
                <li>
                    <h2>5</h2>
                    <p>Jan</p>
                </li>
                <li>
                    <h2>6</h2>
                    <p>Jan</p>
                </li>
                <li>
                    <h2>7</h2>
                    <p>Jan</p>
                </li>
                <li>
                    <h2>8</h2>
                    <p>Jan</p>
                </li>
                <li>
                    <h2>9</h2>
                    <p>Jan</p>
                </li>
                <li>
                    <h2>10</h2>
                    <p>Jan</p>
                </li>
                <li>
                    <h2>11</h2>
                    <p>Jan</p>
                </li>
                <li>
                    <h2>12</h2>
                    <p>Jan</p>
                </li>
            </ul>
            
            <div id="show">
                1月，你好!
            </div>
        </div>

样式

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 220px;
                height: 350px;
                background: gray;
                margin: 30px auto;
            }
            ul{
                overflow: hidden;
            }
            li{
                list-style: none;
                width: 58px;
                height: 58px;
                background: black;
                border: 1px solid white;
                color: white;
                text-align: center;
                float: left;
                margin-left: 10px;
                margin-top: 10px;
            }
            #show{
                width: 200px;
                height: 40px;
                background: white;
                margin: 15px auto;
                color: gray;
                line-height: 40px;
                font-size: 23px;
            }
            
            /* 选中状态 [使能状态]*/
            .active{
                background: white;
                color: orange;
                border: 1px solid red;
            }
        </style>

JS写法

<script src="jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           $(function(){
               // 点击其他选项时，
               // 先删除原来的节点 .active
               // 再给点击的节点添加 .activ
               $('#box li').on('click', function(){
                   // 先移出 .active
                   $('#box .active').removeClass('active')
                   // 再添加 .active
                   $(this).addClass('active')
                   $('#show').html( $(this).find('h2').html() + '月，你好!' )
               })
           })
       </script>