【JavaScript从入门到精通】第五课 选项卡与简易日历

此内容来自开课吧石川微信公众号

选项卡也是网页经常使用的功能,如下图:

【JavaScript从入门到精通】第五课 选项卡与简易日历

通过鼠标指向或者点击不同的选项卡,可以显示不同的内容。那么,要怎么实现这样的选项卡呢?

我们现在来制作一个选项卡,这里先从选项卡的布局讲起。选项卡上方的四个选择项,我们将其设为button按钮,可以看到,四个按钮中总有一个是处于高亮(选中)状态(采用class实现)。而选择项下方显示的内容,可以设置为4个不同的div块。默认情况下,我们会将第一个按钮的状态设为高亮,第一个div的display属性设置为block,另外三个div的display属性设置为none。

此外我们还需要设计这个功能的JS代码部分。我们可以通过getElementsByTagName来选中按钮和div,同时通过for循环对每组按钮和div进行操作。问题来了,采用for循环每次点击执行的函数是一样的,可在onclick事件里,我们希望做到的是点击选择项该选择项就变为高亮,也就是说每次点击变为高亮的按钮是不一样的。那么JS要如何得知我们想操作的是该选择项呢?这个问题可以采用this关键字来解决。this指的是当前发生事件的元素,通过this关键字JS可以得知我们想操作的就是我们点击的元素。

除了这一点外,如果直接这么写,我们产生的功能是点击一个button使其变亮,但实际上,其它button按钮的颜色并没有发生变化,也就是说会产生多个button按钮同时变亮的情况。由于我们并不能确定哪个button是亮的,为了避免这种情况,最简单的办法是在当前button变亮前,把所有button的高亮状态去掉(即将className设置为空)。

现在我们还剩最后一个问题,也就是完成按钮点击后div的切换。在原理上,它和前面的按钮状态切换类似,先将所有div隐藏,然后让当前div显示出来。然而,this选中的是当前的按钮而不是当前div,我们要如何获取当前div呢?因为button数组的下标和div数组的下标是一样的,因此我们只需要确定button数组的下标就有办法完成这件事。在这里,我们在JS里给button添加一个index属性(理论上也可以在HTML里添加,但是大部分浏览器都会过滤掉)使其等于下标,然后通过this.index就可以使div获得button的下标了。

完整代码如下:

<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <div id="div1">
        <input class="active" type="button" value="教育"/>
        <input type="button" value="培训"/>
        <input type="button" value="招生"/>
        <input type="button" value="出国"/>
        <div style="display:block;">1111</div>
        <div>2222</div>
        <div>333</div>
        <div>4444</div>
    </div>
</body>
</html>
#div1 .active {
    background: yellow;
}

#div1 div {
    width: 200px;
    height: 200px;
    background: #CCC;
    border: 1px solid #999;
    display: none;
}
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';
            //alert(this.index);
            aDiv[this.index].style.display = 'block';
        };
    }
};

效果如下:

【JavaScript从入门到精通】第五课 选项卡与简易日历

JavaScript简易日历

这里我们通过JS制作一个简易日历,其效果如下:

【JavaScript从入门到精通】第五课 选项卡与简易日历

这个功能的实现似乎和选项卡并没有什么区别,但很明显的是,使用12个div放置每个月的内容显得很麻烦,也会导致HTML文件变得比较臃肿。因此,我们考虑只用1个div完成这件事。也就是说,我们应该使用JS来改变这个div块里面的文字而不是进行单纯的div叠加。在这里,我们所采取的方法是修改元素的innnerHTML属性。

为了说明innerHTML的具体用法,我们举一个例子。

<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <input id="txt1" type="text"/>
    <input id="btn1" type="button" value="设置文字"/>
    <div id="div1"></div>
</body>
</html>
#div1 {
    width: 200px;
    height: 150px;
    border: 1px solid black;
}
window.onload = function () {
    var oTxt = document.getElementById('txt1');
    var oBtn = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');
    oBtn.onclick = function () {
        oDiv.innerHTML = oTxt.value;
        //alert(oDiv.innerHTML);
    };
};

效果如下:

【JavaScript从入门到精通】第五课 选项卡与简易日历

在这个案例里,我们将txt1里的内容拿出来赋值给了div1的innerHTML属性,当我们在txt1中输入文字点击确认后文字会出现在div1中。innnerHTML指的是该标签下所有的HTML内容,既可以用于修改也可以用于读取。因此,制作我们的简易日历,只需要修改下方div块的innerHTML属性即可。 完整代码如下:

<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript简易日历</title>
</head>
<body>
    <div id="tab" class="calendar">
        <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>
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }
.calendar { width: 210px; margin: 50px auto 0; 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 h2 { }
.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; }
window.onload=function ()
{
    var aDatas=[
        "快过年了,大家可以商量着去哪玩吧~",
        "精通JavaScript开发课程 - 结课标准 - 有十条标准可让大家修练成JS高手……",
        "HTML5开发课程,让你熟练掌握移动应用开发技术",
        "精通各种DOM类应用,熟练掌握面向对象编程思想(OOP)、熟悉JS面向对象开发方式",
        "熟练掌握AJAX技术及相关应用(例如:新浪微博级应用)",
        "可以独立写出类似jQuery的小型库(支持各类选择符、事件类、DOM、自定义动画animate、AJAX……)",
        "精通JS运动特效技术,能完整实现各类网站所有动画特效",
        "掌握JS调试及优化技术、能兼容所有浏览器",
        "精通JS事件对象及事件的工作机制,并能完成各类跨平台应用模块的开发",
        "能独立开发表现和性能都很优秀的RIA应用",
        "了解后台编程的相关知识,能够和后台工程师配合完成大型交互应用",
        "熟悉正则表达式的编写、应用及高级表单验证技术"
    ];
    var oDiv=document.getElementById('tab');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aBtn=oUl.getElementsByTagName('li');
    var oTxt=oDiv.getElementsByTagName('div')[0];
    var i=0;
    for(i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onmouseover=function ()
        {
            for(i=0;i<aBtn.length;i++)
            {
                aBtn[i].className='';
            }
            this.className='active';
            oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+aDatas[this.index]+'</p>';
        };
    }
};

这里有几个需要注意的新知识点。

第一点:字符串拼接。+运算符不仅可以进行数值运算,当+运算符两端存在字符串时,+运算符会进行字符串拼接的操作。

alert('abc'+12+5+'def');

效果如下:

【JavaScript从入门到精通】第五课 选项卡与简易日历

浏览器在做加法时,会从左到右运算,因此该运算的顺序为abc->abc12->ab125->abc125def,如果想将12与5相加,需要添加一个括号。

alert('abc'+(12+5)+'def');

效果如下:

【JavaScript从入门到精通】第五课 选项卡与简易日历

第二点:在修改每月文字的具体内容时,我们采取了数组的方法。理论上我们可以采用if语句判断月份来修改文字,但需要判断12次,因此采用数组的方法明显更为简便。我们前面已经讲过一点数组,在JS里,一个数组最简单的定义方式如下:

var arr=[1,2,3,4];

arr这个数组一共包括1,2,3,4四个元素。同样地,在我们的日历里面,我们也定义了一个数组aDatas,存入每个月的信息,同时依旧通过this.index这个下标找到对应的元素。

第三点:数组下标是从0开始。当然,月份是从1开始的,所以我们在输出月份时将this.index的值加了1。

如需转载,烦请注明出处:https://www.qdskill.com/javascript/461.html

发表评论

登录后才能评论