js基础--选项卡切换效果

在网页中页面布局中，选项卡切换效果非常常见，节省版面位置，标题对用内容一目了然。这里用刚学到的js实现这个类似的简单效果--日历，点击不同的月份选项卡，显示不同的月主题活动。

页面布局：

js:获取元素，每月活动内容用数组保存，方便用index下标获取不用的值。

给每一个月份绑定点击事件，添加选中样式，并改变活动内容。

这里先用到了一个清除样式函数（clearClass()），可以每次点击新的选项后清除上一个选项卡样式，这样效果就出来啦。


以上是用面向过程的写法，下面再用面向对象写法改造：

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 面试题
    前端开发面试题 面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。 题目类型： 理论知...
    怡宝丶阅读 2,630评论 0赞 7
  • js 基础之选项卡切换
    昨天在慕课网接触到了一个 javascript 基础教程，教程的最后要求完成选项卡切换的效果。效果图如下： 为了加...
    Pomodoro_m阅读 1,323评论 2赞 5
  • JQuery表单验证--输入框
    JQuery的简洁易用使它在很多场合完全取代了Javascript，下面演示一下JQuery实现表单验证。 1. ...
    jdzhangxin阅读 1,411评论 0赞 2
  • Leetcode 543. Diameter of Binary Tree
    文章作者：Tyan博客：noahsnail.com | CSDN | 简书 1. Description 2. S...
    SnailTyan阅读 374评论 0赞 0
  • 与我的感觉连接
    拖沓的脚 酸软的腰 咚咚咚 一步一台阶往下走 沉重的双肩包 迷蒙的双眼 模糊的远方 抬头远方的霓虹灯一闪一闪 清新...
    蜕变的大琼阅读 157评论 0赞 0