(day03-3)实现多标签页效果，读取并修改元素的属性（自定义扩展属性—流量卡）

最新推荐文章于 2021-09-15 18:32:22 发布

avoidaily

最新推荐文章于 2021-09-15 18:32:22 发布

阅读量219

点赞数

分类专栏： DOM 文章标签：标签自定义扩展属性

本文链接：https://blog.csdn.net/qq_43459224/article/details/89975671

版权

DOM 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的属性</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/3.css" />
<style></style>

</head>
<body>
	<h2>实现多标签页效果</h2>
  <div class="tabs">
    <ul id="tab">
      <li><a **data-click="tab" href="javascript:;" data-div="content1"**>10元套餐</a></li>
      <li><a data-click="tab" href="javascript:;" data-div="content2">30元套餐</a></li>
      <li><a data-click="tab" href="javascript:;" data-div="content3">50元包月</a></li>
    </ul>
    <div id="container">
      <div id="content1">
        10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
      </div>
      <div id="content2">
        30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
      </div>
      <div id="content3">
        50元包月详情：<br />&nbsp;每月无限量随心打
      </div>
    </div>
  </div>
  <script>
    (function(){
    //1、查找触发事件的元素
    //查找id为tab下的 li下的 data-click属性为tab的所有按钮元素
      **var tabs=document.querySelectorAll("ul#tab>li>[data-click=tab]");
      console.log(tabs);**
    //2、绑定事件处理函数
    //定义全局变量，用于递增zIndex的值
      **var zIndex=10;**
      //遍历tabs中每个按钮
      **for(var tab of tabs){**
        //每遍历一个按钮，就要为期绑定单击事件函数
        **tab.onclick=function(){**
          **var tab=this;**//  ->  <a>  下面有多个，要确定是鼠标选中的当前那个
          //3、查找要修改的元素
          //获得当前a对应div的id
          **var id=tab.getAttribute("data-div");**
          //按id查找当前a对应的div
          **var div=document.getElementById(id);**
          //4、修改元素
          //修改当前a对应div的zIndex属性
          **div.style.zIndex=zIndex;**
          //修改后，必须将本次的zIndex +1，保证下次的值改与本次
          **zIndex++;**
        }
      }
    })()
  </script>
</body>
</html>

/*
这里a标签作按钮用时
#——>JavaScript：；执行一条js空语句，但是不跳转页面

其他情况作——锚点、跳转：#
*/

在这里插入图片描述

avoidaily

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(day03-3)实现多标签页效果，读取并修改元素的属性（自定义扩展属性—流量卡）

读取并修改元素的属性实现多标签页效果 /*这里a标签作按钮用时#——>JavaScript：；执行一条js空语句，但是不跳转页面其他情况作——锚点、跳转：#*/...
复制链接

扫一扫