JS实现的简单标签点击切换功能示例


Posted in Javascript onSeptember 21, 2017

本文实例讲述了JS实现的简单标签点击切换功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

JS实现的简单标签点击切换功能示例

具体代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com 三水点靠木</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style-type: none;
    }
    .box {
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      overflow: hidden;
    }
    .hd {
      height: 45px;
    }
    .hd span {
      display: inline-block;
      width: 90px;
      background-color: pink;
      line-height: 45px;
      text-align: center;
      cursor: pointer;
    }
    .hd span.current {
      background-color: yellowgreen;
    }
    .bd li {
      height: 255px;
      background-color: yellowgreen;
      display: none;
    }
    .bd li.current {
      display: block;
      font-size: 36px;
    }
  </style>
</head>
<body>
<div class="box" id="box">
  <div class="hd">
    <span class="current">体育</span>
    <span>娱乐</span>
    <span>新闻</span>
    <span>综合</span>
  </div>
  <div class="bd">
    <ul>
      <li class="current">我是体育模块</li>
      <li>我是娱乐模块</li>
      <li>我是新闻模块</li>
      <li>我是综合模块</li>
    </ul>
  </div>
</div>
<script>
  var box = document.getElementById("box");
  var spans = box.getElementsByTagName("span");
  var lis = box.getElementsByTagName("li");
  for (var i = 0; i < spans.length; i++) {
    spans[i].aaa = i;
    spans[i].onclick = function () {
      for (var i = 0; i < spans.length; i++) {
        spans[i].className = "";
        lis[i].className = "";
      }
      this.className = "current";
      lis[this.aaa].className = "current";
    }
  }
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
原生小程序封装跑马灯效果
Oct 21 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 #Javascript
React-Native左右联动List的示例代码
Sep 21 #Javascript
angularjs实现简单的购物车功能
Sep 21 #Javascript
JS实现前端缓存的方法
Sep 21 #Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 #Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 #jQuery
详解react服务端渲染(同构)的方法
Sep 21 #Javascript
You might like
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
vue axios用法教程详解
2017/07/23 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python内置函数delattr的具体用法
2017/11/23 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
本科毕业生求职信
2014/06/15 职场文书
自我管理的活动方案
2014/08/25 职场文书
2014年工会工作总结
2014/11/12 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python