Js classic case of - Easy Calendar

html code

<!DOCTYPE html>
<html>
<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>Document</title>
    <style type="text/css">
        * { padding: 0; margin: 0; }
        li { list-style: none; }
        body { background: #f6f9fc; font-family: arial; }
        
        .calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
        .calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
        .calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
        .calendar li h2 { font-size: 20px; padding-top: 5px; }
        .calendar li p { font-size: 14px; }
        
        .calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
        .calendar .active p { font-weight: bold; }
        
        .calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
        .calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
        .calendar .text p { font-size: 12px; line-height: 18px; }     
        </style>        
</head>
<body>
    <div id="tab" class="calendar">
        <ul id="box">
            <li class="active"><h2>1</h2><p>JAN</p></li>
            <li ><h2>2</h2><p>FER</p></li>
            <li ><h2>3</h2><p>MAR</p></li>
            <li ><h2>4</h2><p>APR</p></li>
            <li ><h2>5</h2><p>MAY</p></li>
            <li><h2>6</h2><p>JUN</p></li>
            <li><h2>7</h2><p>JUL</p></li>
            <li><h2>8</h2><p>AUG</p></li>
            <li><h2>9</h2><p>SEP</p></li>
            <li><h2>10</h2><p>OCT</p></li>
            <li><h2>11</h2><p>NOV</p></li>
            <li><h2>12</h2><p>DEC</p></li>
        </ul>
        <div class = "text" the above mentioned id = "TXT" > 
            < h2 > January Events </ h2 > 
            < the p- > New Year approached, we can discuss where to go and play ~ </ the p- > 
        </ div > 
    </ div > 

</ body >

Here is the control of the page by js code, the main change, then change the page when clicked

<Script of the type = "text / JavaScript">
      var arr = [ 'New Year approached, we can discuss where to play ~' ,
         'we learn it ~ ~ ~ 222222' ,
         'we learn it ~ ~ ~ 222 222 333 ' ,
         ' we learn it ~ ~ ~ 222 444 222 ' ,
         ' 555 we learn it ~ ~ ~ 222222 ' ,
         ' we learn it ~ ~ ~ 666 222 222 ' ,
         ' 227 772 222 ~ ~ ~ we learn it ' ,
         ' we have a good ~ ~ ~ 28,888,822,222 learn it ' ,
         ' we learn it 99,999,222,222 ~ ~ ~ ' ,
         ' we learn ~ ~ ~ 10 million it 222222 ' ,
         ' we learn it ~ ~ ~ 111 111 222 222 ' ,
         ' we learn it 22222200000000000 ~~ ~ ']


        var ali=document.querySelectorAll("#box li");
        var OH2 = document.getElementById ( "TXT") Children [0. ];
         var OP = document.getElementById ( "TXT") Children [. 1. ]; 

        // create a loop, through each li; 
         // all tied li given click event 
         // loop is executed immediately without waiting for a event 
        for ( var I = 0; I <ali.length; I ++ ) {
         // for each of a number li; 
            Ali [I] .abc = I;
             // click list when make a list of color; the cycle will not wait for the event; if you do not re-iterate once; then click on the time cycle early traverse over; i when ali.length click =; 
            Ali [i] .onclick = function () {
                 for (J = 0; J <ali.length; J ++ ) {
                 // make every li have no class attribute; per-click and then add to his property;
                    Ali [J] .className = "" ; 
                } 
                    // the this function is called by the pointing object; 
                the console.log ( the this );
                 // to the current class plus the name, who will point to the color 
                the this .className = "Active" ; 
                the console.log ( the this .abc)
                 // the index to find the data in the array 
                oh2.innerHTML = the this .abc +. 1 + "month" ; 
                op.innerHTML = ARR [ the this .abc]; 
            } 
            
        }
 </ Script>

Js classic case of - Easy Calendar

Guess you like