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 相关文章推荐
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
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将向Java靠拢
2006/10/09 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
JS实现页面打印功能
2017/03/16 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
查看Django和flask版本的方法
2018/05/14 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
建筑工地质量标语
2014/06/12 职场文书
个人求职自荐信范文
2014/06/20 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技