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 构造函数在表单提交过程中修改数据
May 25 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
JS实现炫酷轮播图
Nov 15 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求最大子序列和的算法实现
2011/06/24 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
PHP安全性漫谈
2012/06/28 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
php二维码生成以及下载实现
2017/09/28 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python如何快速实现分布式任务
2017/07/06 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
销售人员获奖感言
2014/02/05 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
2014最新实习证明模板
2014/10/02 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript