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 相关文章推荐
一段实现页面上的图片延时加载的js代码
Feb 11 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
javascript不可用的问题探究
Oct 01 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
vue实现路由切换改变title功能
May 28 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
php微信开发之百度天气预报
2016/11/18 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
js 调用父窗口的具体实现代码
2013/07/15 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
react路由配置方式详解
2017/08/07 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
跟老齐学Python之Python文档
2014/10/10 Python
Python中给List添加元素的4种方法分享
2014/11/28 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
python实现文字版扫雷
2020/04/24 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
应届大学生简历中的自我评价
2014/01/15 职场文书
食品工程专业求职信
2014/06/15 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2014年林业工作总结
2014/12/05 职场文书
单位租车协议书
2015/01/29 职场文书
2016银行招聘自荐信
2016/01/28 职场文书