JavaScript选项卡功能

本文作为一个我学习了blue大佬js视频的小笔记。

在各种网站中JavaScript的选项卡一个非常实用而且常见的的功能,笔记中会详细的记录如何实现这个功能的。

选项卡效果演示

原始效果


这个效果的结构由上面的具体月份+下面每个月的任务安排构成

想要实现的效果是当我鼠标移动到每个月份的时候,下面的任务随月份而改变,就像这样:


当我的鼠标移入到2月份的时候,下面的任务就变成了“快乐学习”。

如何使用js实现这种快速而且代码不冗杂的情况下实现这个选项卡的功能呢?请继续往下看。

html代码

首先放置我的html的代码。从代码可以看见,我的具体任务盒子就设置了一个,这样做的好处是不会让html的代码放置过多的盒子,使得html的代码更加容易理解和解读。

<!--这是html-->
    <div id="study">
      <!--这是我的标题-->
        <h2>前端学习计划</h2>
      <!--这是具体的月份-->
        <ul>
            <li class="active">
                <h3>1月</h3><span>Jan</span></li>
            <li>
                <h3>2月</h3><span>Feb</span></li>
            <li>
                <h3>3月</h3><span>Mar</span></li>
            <li>
                <h3>4月</h3><span>Apr</span></li>
            <li>
                <h3>5月</h3><span>May</span></li>
            <li>
                <h3>6月</h3><span>Jun</span></li>
            <li>
                <h3>7月</h3><span>Jul</span></li>
            <li>
                <h3>8月</h3><span>Aug</span></li>
            <li>
                <h3>9月</h3><span>Sept</span></li>
            <li>
                <h3>10月</h3><span>Oct</span></li>
            <li>
                <h3>11月</h3><span>Nov</span></li>
            <li>
                <h3>12月</h3><span>Dec</span></li>
        </ul>
      <!--这是放置每个月任务的盒子,这里我默认显示了1月-->
        <div id="task">
            <h4>1月任务</h4>
            <p>好好学习</p>
        </div>
    </div>


css代码

这是css代码,细节的朋友会发现,我 并没有在css里面设置hover属性,因为我都使用了js来完成鼠标事件。

具体的配色我会在文中末尾备注,喜欢配色的朋友可以直接使用。

/*这里是css代码*/
/*设置最外层盒子的样式*/
#study {
    width: 520px;
    margin: 20px auto;
    background-color: #fffae4;
    padding-bottom: 10px;
}
/*设置主标题的样式*/
h2 {
    background-color: #40627c;
    color: #d0a825;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-radius: 10px 10px 0 0;
}
/*使下面任务盒子的标题没有外边距*/
h4 {
    margin: 0;
}
/*使用flex布局,让每个月按我需要的形成3行4列*/
ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
/*设置每个月份之间的距离和自身颜色*/
ul li {
    margin: 5px;
    float: left;
    text-align: center;
    border: 1px solid pink;
    width: 100px;
    height: 100px;
    background-color: #e8e595;
    color: #d0a825;
}
/*这里是下面任务盒子的样式*/
#task {
    background-color: #e8e595;
    height: 80px;
    margin: 10px 40px;
    color: #40627c;
    padding: 10px;
}
/*这是上面每个月份鼠标移入时候的颜色*/
.active {
    background-color: #40627c;
}


js代码

这里是js代码,大家结合注释仔细的看就好了。

//这里是js的代码

 <script>
            //定义一个数据来存放每个月的任务,以后只需要修改数组内容就可以修改页面显示的任务内容了,我只定义到4月
        var arr = [
            "好好学习~1月",
            "快乐学习~2月",
            "放弃学习~3月",
              ".....~4月"
        ];
                //这三组是把html的元素存放在我定义的变量里
        var oDiv = document.getElementById("study");
        var aLi = oDiv.getElementsByTagName("li");
        var aDiv = oDiv.getElementsByTagName("div")[0];

            //开始循环
        for (i = 0; i < aLi.length; i++) {
            // 设置一个index来计算月份
            aLi[i].index = i;
              //鼠标移入的时候
            aLi[i].onmouseover = function() {
                for (i = 0; i < aLi.length; i++) {
                      //首先清除每个html里的每个li的active类名,使他们的颜色变为默认
                    aLi[i].className = ""
                }
                  //给html里的每个li设置active类名,获得背景色
                this.className = "active";
                //i从0开始算,+1从1开始计算
                // 使用括号包裹this.index+1,数字优先相加,避免被拼接成字符串
                //用数组来定义每个月的任务
                aDiv.innerHTML = "<h4>" + (this.index + 1) + "月任务</h4><p>" + arr[this.index] + "</p>";
            }
        }
    </script>

页面配色

标题、任务字色与悬浮色 | #40627 |
背景色 | #ffae4 |
月份字体色 | #d0a825 |
月份背景色 | #e8e595 |

以上就是全部的内容,感谢观看。

本文链接:

https://bahargul.xyz/index.php/archives/15/
1 + 3 =
快来做第一个评论的人吧~