用js实现选项卡案例

来源：互联网发布：淘宝主图片尺寸编辑：程序博客网时间：2024/06/06 18:44
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>选项卡</title>    <style type="text/css">      div {      width:200px;      height:200px;      border:1px solid #f00;      display:none;      }    </style><script type="text/javascript">/* * 需求：点击按钮显示对应的div，让其他的按钮背景色去掉，让其他的div都隐藏 *    分析一： *    1、获取到所有的按钮以及div *    2、给每一个按钮添加点击事件 *      (1)把上一个点击按钮的背景色去掉 *      (2)把上一个点击的按钮对应的div，让它隐藏 *      (3)给当前点击的按钮添加一个背景色 *      (4)给当前点击的按钮对应的div，让它显示 * -------------------------------------------------------- *//*window.onload = function(){var  inputs = document.querySelectorAll("input");var divs = document.querySelectorAll("div");var last = inputs[0];//存取的是上一次的点击对象，默认为inputs[0]/* * 每一个按钮都对应一个div，它们的下标值都是相同的 * 如果取到一个下标值,通过下标值就能找到相应的按钮与div *//*for(var i=0;i<divs.length;i++){inputs[i].index = i;//给每一个nput自定义一个index属性，存的是它们对应的索引值inputs[i].onclick = function(){last.style.backgroundColor = "";//去掉上一次点击的按钮的背景色divs[last.index].style.display = "none";divs[this.index].style.display = "block";this.style.backgroundColor = "yellowgreen";last = this;//把上一次点击的对象更新为这一次点击的对象};}};/* *  分析二： *    1、获取到所有的按钮以及div *    2、给每一个按钮添加点击事件 *      (1)把所有按钮的背景色去掉 *      (2)把所有的div隐藏 *      (3)给当前点击的按钮添加一个背景色 *      (4)给当前点击的按钮对应的div，让它显示 */window.onload = function(){var inputs = document.querySelectorAll("input");var divs = document.querySelectorAll("div");for(var i=0;i<inputs.length;i++){inputs[i].index = i;//自定义属性，存放索引值inputs[i].onclick = function(){//当点击按钮I的时候才执行内循环，与外循环无关for(var i=0;i<inputs.length;i++){inputs[i].style.backgroundColor = "";divs[i].style.display = "none";}this.style.backgroundColor = "yellowgreen";divs[this.index].style.display = "block";};}};</script></head><body><input type="button" id="btn" value="选项1" style="background-color:yellowgreen;" /><input type="button" id="btn" value="选项2" /><input type="button" id="btn" value="选项3" /><div style="display:block;">div1</div><div>div2</div><div>div3</div></body></html>
阅读全文
0 0