读取并修改元素的属性：实现多标签页效果

来源：互联网发布：如何做好淘宝客推广编辑：程序博客网时间：2024/06/07 02:35

<span style="font-size:18px;"><!DOCTYPE HTML><html><head><title>读取并修改元素的属性</title><meta charset="utf-8" /><link rel="stylesheet" href="css/4_1.css" /><style>.foreground { z-index: 1; }</style><script>function toggle(n){//查找包含style属性的div，保存在变量currDiv中var currDiv=document.querySelector("div[style]");//如果currDiv的id不等于"content"+nif(currDiv.id!="content"+n){//移出currDiv的stylecurrDiv.removeAttribute("style");//查找id为content+n的div,设置其内联样式z-index为1document.getElementById("content"+n).style.zIndex=1;//优先级高，不影响其他的样式}}</script></head><body><h2>实现多标签页效果</h2><ul id="tab"><li id="tab1" onclick="toggle(1)">10元套餐</li><!--简单的程序不一定传this--><li id="tab2" onclick="toggle(2)">30元套餐</li><li id="tab3" onclick="toggle(3)">50元包月</li></ul><div id="container"><!--<div id="content1" class="foreground">--><!--强调：使用style.设置的属性，默认格式都是:"属性: 值;"--><div id="content1" style="z-index: 1;">10元套餐详情：<br /> 每月套餐内拨打100分钟，超出部分2毛/分钟</div><div id="content2">30元套餐详情：<br /> 每月套餐内拨打300分钟，超出部分1.5毛/分钟</div><div id="content3">50元包月详情：<br /> 每月无限量随心打</div></div></body></html></span>

效果：

0 0