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 相关文章推荐
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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
收音机的保养
2021/03/01 无线电
PHP4之COOKIE支持详解
2006/10/09 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
PHP小技巧之函数重载
2014/06/02 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
python读取LMDB中图像的方法
2018/07/02 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
教师现实表现材料
2014/02/14 职场文书
物控部经理职务说明书
2014/02/25 职场文书
委托证明范本
2014/11/25 职场文书
产品质量保证书范本
2015/02/27 职场文书
居住证明范文
2015/06/17 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
《开国大典》教学反思
2016/02/16 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript