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去掉数组中的重复元素
Jan 13 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
node中的密码安全(加密)
Sep 17 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
使用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
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
原生Javascript插件开发实践
2017/01/18 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
JS实现拼图游戏
2021/01/29 Javascript
node 版本切换的实现
2020/02/02 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
python del()函数用法
2013/03/24 Python
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python多进程机制实例详解
2015/07/02 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
Java程序员面试题
2013/07/15 面试题
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
家属慰问信
2015/02/14 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
Django程序的优化技巧
2021/04/29 Python
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android