JavaScript日历选项卡-小记

这里写图片描述
<style>
    ul {
        width: 500px;
        height: auto;
        overflow: hidden;
        background-color: #e5f4fd;
    }

    li {
        margin: 5px;
        list-style: none;
        float: left;
        text-align: center;
        width: 100px;
        background-color: aliceblue;
    }

    #textDiv {
        width: 500px;
        float: left;
        text-align: center;
        background-color: aliceblue;
        overflow: hidden;
        background-color: #e5f4fd;

    }

    li:hover {
        background-color: #60baed;
    }

    .div1 {
        overflow: hidden;
        background-color: #e5f4fd;

        width: 500px;
    }

    .active {
        color: #e84a7e;
    }
</style>
<script type="text/javascript">
    var aDatas = [
        "快过年了，大家可以商量着去哪玩吧～",
        "精通JavaScript开发课程 - 结课标准 - 有十条标准可让大家修练成JS高手……",
        "HTML5开发课程，让你熟练掌握移动应用开发技术",
        "精通各种DOM类应用，熟练掌握面向对象编程思想（OOP）、熟悉JS面向对象开发方式 - 智能课堂 - www.zhinengshe.com",
        "熟练掌握AJAX技术及相关应用（例如：新浪微博级应用） - 智能课堂 - www.zhinengshe.com",
        "可以独立写出类似jQuery的小型库（支持各类选择符、事件类、DOM、自定义动画animate、AJAX……） - 智能课堂 - www.zhinengshe.com",
        "精通JS运动特效技术，能完整实现各类网站所有动画特效，如 智能课堂 官网 - 智能课堂 - www.zhinengshe.com",
        "掌握JS调试及优化技术、能兼容所有浏览器 - 智能课堂 - www.zhinengshe.com",
        "精通JS事件对象及事件的工作机制，并能完成各类跨平台应用模块的开发 - 智能课堂 - www.zhinengshe.com",
        "能独立开发表现和性能都很优秀的RIA应用 - 智能课堂 - www.zhinengshe.com",
        "了解后台编程的相关知识，能够和后台工程师配合完成大型交互应用 - 智能课堂 - www.zhinengshe.com",
        "熟悉正则表达式的编写、应用及高级表单验证技术 - 智能课堂 - www.zhinengshe.com"
    ];
    window.onload = function () {
        var aDiv = document.getElementById('div1');
        var aTextDiv = document.getElementById('divtext');
        var aui = document.getElementById('aul');
        var aLi = aui.getElementsByTagName('li');
        alert(aLi[i]);
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;//给Li标签定个标记
            //点击效果。
            aLi[i].onmousemove = function () {
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className = '';
                }
                this.className = 'active';
                //改变每个div的值
                aTextDiv.innerHTML = '<h2>' + (this.index + 1) + '月活动</h2><p>' + aDatas[this.index] + '</p>';
            }
        }

    }
</script>
<body>
<div class="div1">
    <ul id="aul">
        <li class="active">
            <h2>一月</h2>
            <p>One</p>
        </li>
        <li><h2>二月</h2>
            <p>One</p>
        </li>
        <li><h2>三月</h2>
            <p>One</p>
        </li>
        <li><h2>四月</h2>
            <p>One</p>
        </li>
        <br>
        <li><h2>五月</h2>
            <p>One</p>
        </li>
        <li><h2>六月</h2>
            <p>One</p>
        </li>
        <li><h2>七月</h2>
            <p>One</p>
        </li>
        <li><h2>八月</h2>
            <p>One</p>
        </li>
        <li><h2>九月</h2>
            <p>One</p>
        </li>
        <li><h2>十月</h2>
            <p>One</p>
        </li>
        <li><h2>十一月</h2>
            <p>One</p>
        </li>
        <li><h2>十二月</h2>
            <p>One</p>
        </li>
    </ul>
    <div id="divtext">
        <h2>一月份</h2>
        <p>一月份天气好</p>
    </div>
</div>
</body>
</html>
JavaScript日历选项卡-小记

猜你喜欢
