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 相关文章推荐
Javascript 面向对象之重载
May 04 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
使用vue构建多页面应用的示例
Oct 22 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
fgetcvs在linux的问题
2012/01/15 PHP
PHP session 会话处理函数
2016/06/06 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
vue登录注册实例详解
2019/09/14 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
python实现socket端口重定向示例
2014/02/10 Python
使用python绘制人人网好友关系图示例
2014/04/01 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python几种常用功能实现代码实例
2019/12/25 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
python中pow函数用法及功能说明
2020/12/04 Python
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
管理科学大学生求职信
2013/11/13 职场文书
试用期员工考核制度
2014/01/22 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
车间主任岗位职责
2014/03/16 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
Python中22个万用公式的小结
2021/07/21 Python