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的数组的扩展实例代码
Jul 09 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
jquery等待效果示例
May 01 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
vue-router中hash模式与history模式的区别
Jun 23 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
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
js模糊查询实例分享
2016/12/26 Javascript
vue-axios使用详解
2017/05/10 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
javascript动态创建对象的属性详解
2018/11/07 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
小学开学寄语
2014/01/19 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android