|
阅读：2984回复：0
切换栏。2023.1.25<style> * { margin: 0; padding: 0; background-color: #dd5f03; } ul { list-style-type: none; } .box { width: 1000px; height: 400px; margin: 100px auto; display: flex; justify-content: flex-end; align-content: flex-end; flex-direction: column; align-items: center; } .hd { height: 45px; display: flex; justify-content: center; position: fixed; } .box > .hd span { display: inline-block; width: 200px; background-color: #e9a069; line-height: 45px; text-align: center; cursor: pointer; } .hd span.current { background-color: #e9a069; transform: scaleY(1.3); transition: 0.8s; } .box > .bd li { height: 405px; background-color: #dd5f03; display: none; } .bd li.current { display: block; font-size: 36px; } </style> </head> <body> <div class="box" id="box"> <div class="bd"> <ul> <li class="current"><img src="../选项2/index_slide_con01.png" /></li> <li><img src="../选项2/index_slide_con02.png" /></li> <li><img src="../选项2/index_slide_con03.png" /></li> <li><img src="../选项2/index_slide_con04.png" /></li> <li><img src="../选项2/index_slide_con05.png" /></li> </ul> </div> <div class="hd"> <span class="current">大数据</span> <span>媒体资源</span> <span>精准营销</span> <span>跨屏</span> <span>检测优化</span> </div> </div> <script> var box = document.getElementById("box"); var spans = box.getElementsByTagName("span"); var lis = box.getElementsByTagName("li"); for (var i = 0; i < spans.length; i++) { //循环5个元素，找出被点击的那个 spans[i].j = i; //j是容器用来容纳i产生是数据变量 spans[i].onclick = function () { //点击spans触发这个函数 for (var i = 0; i < spans.length; i++) { spans[i].className = ""; //还原没有被点击的其他按钮 lis[i].className = ""; //还原没有被点击的其他按钮 } this.className = "current"; //获取这个元素的所有子元素 lis[this.j].className = "current"; //特定的按钮点击后，返回去让消失的图片不再消失 }; } </script> </body> |
|
公众号
