js + css实现标签内容切换功能(实例讲解)


Posted in Javascript onOctober 09, 2017

先附上效果图和代码:

js + css实现标签内容切换功能(实例讲解)

html 文档:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script type="text/javascript" src="../js/tabs_function.js"></script>
 <script type="text/javascript">
  window.onload = function main() {
   Tabs(".list-item", ".contents", "list-item-checked", "contents-checked");

  }
 </script>
 <style type="text/css">
  #list-title {
   width: 318px;
   height: 56px;
   margin: 0;
   list-style-type: none;
   padding-left: 0;
  }

  .list-item {
   float: left;
   width: 100px;
   height: 50px;
   margin: 2px;
   line-height: 50px;
   font-size: 28px;
   text-align: center;
   border: 1px solid #000;
   cursor: pointer;
  }

  .list-item-checked {
   background-color: #70adff;
   color: #ffffff;
  }

  #content-box {
   position: relative;
   clear: both;
   width: 314px;
   height: 302px;
   margin: 0 2px;
  }

  .contents {
   position: absolute;
   left: 0;
   top: 0;
   width: 312px;
   height: 300px;
   margin: 0;
   font-size: 32px;
   line-height: 300px;
   text-align: center;
   border: 1px solid #000;
   z-index: 0;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
  }

  .contents-checked {
   z-index: 1;
   opacity: 1;
   visibility: visible;
  }
 </style>
</head>
<body>
<ul id="list-title">
 <li class="list-item list-item-checked">1</li>
 <li class="list-item">2</li>
 <li class="list-item">3</li>
</ul>
<div id="content-box">
 <div class="contents contents-checked" style="background-color: #c8ff40;">content_1</div>
 <div class="contents" style="background-color: #41ff6f;">content_2</div>
 <div class="contents" style="background-color: #ff82a0;">content_3</div>
</div>
</body>
</html>

js 文件:

/**
 * Created by Administrator on 2016/9/12.
 */

/*
 * tabs_name:用于触发事件的标签的类名;
 * contents_name:内容容器的类名;
 * tabs_checked_style:标签为选中状态时的样式;
 * contents_checked_style:内容容器为选中状态时的样式;
 *
 * classList.toggle();
 * 检查元素的类名列表中是否有指定的类名,如果有则移除,如果没有则添加;
 * */
function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
 var tabs = document.querySelectorAll(tabs_name),
  contents = document.querySelectorAll(contents_name),
  e_mark = 0;
 for (var i = 0, len = tabs.length; i < len; i++) {
  tabs[i].num = i;
  tabs[i].onclick = function () {
   tabs[e_mark].classList.toggle(tabs_checked_style);
   tabs[this.num].classList.toggle(tabs_checked_style);
   contents[e_mark].classList.toggle(contents_checked_style);
   contents[this.num].classList.toggle(contents_checked_style);
   e_mark = this.num;
  };
 }
}

原理机制

关于css中,类的叠加效果。

我们知道,一个元素可以添加多个类名,同时会被多个类的样式层叠起来显示。

例如:

js + css实现标签内容切换功能(实例讲解)

js + css实现标签内容切换功能(实例讲解)

.list-item {
   float: left;
   width: 100px;
   height: 50px;
   margin: 2px;
   line-height: 50px;
   font-size: 28px;
   text-align: center;
   border: 1px solid #000;
   cursor: pointer;
  }

  .list-item-checked {
   background-color: #70adff;
   color: #ffffff;
  }

可以看到,第一个li的class属性中,有两个类名:.list-item 和 .list-item-checked。那么这个li元素就会同时拥有这个两个类的样式。

相比较,第二个和第三个li的class只有:.list-item。因此他们不会拥有 .list-item-checked 所设置的样式。

回到主题,标签切换,实际就是获取到元素,然后修改元素的样式。那么其中的元素样式就可以通过“classList”来控制元素的类名,从而修改样式。

简单介绍 classList 方法。

1. element.classList 只是获取到元素的类名列表。

2. element.clasList.add(value); 该方法是向元素的类名列表中添加指定的类名

3. element.classList.remove(value); 该方法是从元素的类名列表中删除指定的类名

4. element.classList.contains(value); 该方法是判断元素的类名列表中是否存在指定的类名;该方法会返回一个布尔值

5. element.classList.toggle(value); 该方法是判断元素的类名列表中是否存在指定的类名,如果存在,则删除该类名;如果不存在,则添加该类名

其中,“value”的值可以为一个变量或者字符串常量;

element.classList.add("class-name"); // 字符串
 element.classList.add(class_name); // 变量
 
 element.classList.remove(class_name);
 element.classList.contains(class_name); // true,false
 element.classList.toggle(class_name); // 有则删,无则添;

js 部分

e_mark = 0;
 for (var i = 0, len = tabs.length; i < len; i++) {
  tabs[i].num = i;
  tabs[i].onclick = function () {
   tabs[e_mark].classList.toggle(tabs_checked_style);
   tabs[this.num].classList.toggle(tabs_checked_style);
   contents[e_mark].classList.toggle(contents_checked_style);
   contents[this.num].classList.toggle(contents_checked_style);
   e_mark = this.num;
  };
 }

1. “e_mark” 的作用:

e_mark = 0;

初始的 “e_mark” 的值为“0”。表示“e_mark”指向的是当前被选中的元素为编号是“0”的那个元素。

2. “tabs[i].num=i” 的作用:

tabs[i].num = i;

在上层的for循环中,“i”的值其实就是“tabs”数组中各个元素的下标值。由于“onclick”等事件的匿名函数中无法直接获取到“i”的值。也就是说,当元素被点击时,触发的函数无法得知是“tabs”数组中的第几个元素被点击了,因为每一个元素都可能触发这个函数。但是,函数可以通过“this”来得知是哪一个元素被点击了,至于这个被点击的元素是第几个,可以通过这个被点击的元素的一个自定义值来获取。

我们在元素被点击之前,先给这些元素绑定一个编号:num(自定义值),那么就可以通过“this.num”来获取到这个元素的编号。也就知道这个元素是“tabs”数组中的第几个元素了。

3. 修改当前元素和更新元素的样式:

tabs[e_mark].classList.toggle(tabs_checked_style);
tabs[this.num].classList.toggle(tabs_checked_style); 

上面说到,“e_mark” 为当前元素的编号,而“this.num”为被点击及新选中的元素的编号。

那么当元素被点击时,需要做两件事:1.把当前被选中的元素的样式还原到普通的样式,2.将被点击的元素的样式修改为被选中时的样式。

结合classList的方法,我们知道:.list-item-checked 为被选中时追加的样式,选中的元素只需添加这个类名即可,而未被选中的元素则移除这个类名。

以上这篇js + css实现标签内容切换功能(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
Node.js搭建小程序后台服务
Jan 03 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
js用类封装pop弹窗组件
Oct 08 #Javascript
利用js编写网页进度条效果
Oct 08 #Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 #Javascript
JS动态修改网页body的背景色实例代码
Oct 07 #Javascript
JS实现简单表格排序操作示例
Oct 07 #Javascript
javascript数组定义的几种方法
Oct 06 #Javascript
You might like
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
Python and、or以及and-or语法总结
2015/04/14 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
2014年五一劳动节社区活动总结
2014/04/14 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
后天观后感
2015/06/08 职场文书
黄埔军校观后感
2015/06/10 职场文书
公司职员入党自传书
2015/06/26 职场文书
学习计划是什么
2019/04/30 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers