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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
JS检测图片大小的实例
Aug 21 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
浅析javascript的return语句
Dec 15 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
Vue中CSS动画原理的实现
Feb 13 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
python 对象和json互相转换方法
2018/03/22 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
详解Python3定时器任务代码
2019/09/23 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
书法比赛获奖感言
2014/02/10 职场文书
道德之星事迹材料
2014/05/03 职场文书
明确岗位职责
2015/02/14 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android