javascript初探四

最新推荐文章于 2024-04-24 12:36:15 发布

可芭乐

最新推荐文章于 2024-04-24 12:36:15 发布

阅读量226

点赞数

分类专栏：小作品文章标签： javascript

本文链接：https://blog.csdn.net/a839371666/article/details/54565604

版权

小作品专栏收录该内容

10 篇文章 0 订阅

订阅专栏

选项卡、简易日历

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 .active{
        background: yellow;
    }
    #div1 div{
        width: 200px;
        height: 200px;
        background: #CCC;
        border: 1px solid #999;
        display: none;
    }
</style>
<script type="text/javascript">
    window.onload = function (){
        var oDiv = document.getElementById('div1');
        var aBtn = oDiv.getElementsByTagName('input');
        var aDiv = oDiv.getElementsByTagName('div');

        for(var i = 0; i < aBtn.length; i++){
            aBtn[i].index = i;
            aBtn[i].onclick = function(){
                for(var i = 0; i <aBtn.length; i++){
                    aBtn[i].className = '';
                    aDiv[i].style.display = 'none';
                }
                this.className = 'active';
                aDiv[this.index].style.display = 'block';
            }
        }
    }
</script>
</head>
<body>
    <div id="div1">
        <input type="button" value="教育" />
        <input type="button" value="培训" />
        <input type="button" value="招生" />
        <input type="button" value="出国" />
        <div>1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>
    </div>
</body>
</html>

在选择不同的按钮时，会出现不同的选择；
设置一个index，为接下去找到同一组内容提供方便；
js中第二个for循环是为了将原来的背景先去掉，然后再点击加入active；

简易日历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    .text {
        clear: both;
        margin-left: 50px;
        background: #999;
        width: 460px;
        height: 150px;
        border: 1px solid black;
    }
    .active {
        border: 1px solid blue;
        background: yellow;
        color: white;
    }
    ul {
        list-style: none;
        width: 600px;
    }
    li {
        cursor: pointer;
        float: left;
        margin: 10px;
        width: 100px;
        height: 100px;
        border: 1px solid green;
        background: red;
        color: black;
    }
</style>
<script type="text/javascript">
    window.onload = function (){
        var oDiv = document.getElementById('tab');
        var aLi = oDiv.getElementsByTagName('li');
        var oTxt = oDiv.getElementsByTagName('div')[0];

        var arr = ['qqwer','asdf','ftyfv','gtyift','yfccvy','tgut','yuvb','tgtytf','drtdu','asdf','gyug','rdzx'];
        for(var i = 0; i < aLi.length; i++){
            aLi[i].index = i;
            aLi[i].onmouseover = function(){
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className = '';
                }
                this.className = 'active';
                oTxt.innerHTML = '<h2>' + (this.index + 1) + '月活动</h2><p>' +arr[this.index] +'</p>';
            }
        }
    }
</script>
</head>
<body>
    <div id="tab" class="calender">
        <ul>
            <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">
            <h2>1 月活动</h2>
            <p>快过年了……</p>
        </div>
    </div>
</body>
</html>

可芭乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript初探四

选项卡、简易日历选项卡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css"> #div1 .active{ background: yellow; } #div1 div{
复制链接

扫一扫