JS_tab栏切换
来源:互联网 发布:matalab y引入数据 编辑:程序博客网 时间:2024/05/01 17:17
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .box { width: 500px; height: 400px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } ul { width: 600px; height: 40px; margin-left: -1px; list-style: none; } li { float: left; width: 101px; height: 40px; text-align: center; font: 600 18px/40px "simsun"; background-color: pink; cursor: pointer; } span { display: none; width: 500px; height: 360px; background-color: yellow; text-align: center; font: 700 150px/360px "simsun"; } .show { display: block; } .current { background-color: yellow; } </style></head><body> <div class="box"> <ul> <li class="current">鞋子</li> <li>袜子</li> <li>帽子</li> <li>裤子</li> <li>裙子</li> </ul> <span class="show">鞋子</span> <span>袜子</span> <span>帽子</span> <span>裤子</span> <span>裙子</span> </div> <div class="box"> <ul> <li class="current">鞋子</li> <li>袜子</li> <li>帽子</li> <li>裤子</li> <li>裙子</li> </ul> <span class="show">鞋子</span> <span>袜子</span> <span>帽子</span> <span>裤子</span> <span>裙子</span> </div> <div class="box"> <ul> <li class="current">鞋子</li> <li>袜子</li> <li>帽子</li> <li>裤子</li> <li>裙子</li> </ul> <span class="show">鞋子</span> <span>袜子</span> <span>帽子</span> <span>裤子</span> <span>裙子</span> </div></body></html>
- 方法一
<script> //需求:鼠标放到上面的li上,li本身变色(添加类),对应的span也显示出来(添加类); //思路:1.点亮盒子。 2.利用索引值显示盒子。 //步骤: //1.获取事件源和相关元素 //2.绑定事件 //3.书写事件驱动程序(排他思想) //1.获取事件源和相关元素 var boxArr = document.getElementsByClassName("box"); //函数调用 for(var i=0;i<boxArr.length;i++){ fn(boxArr[i]); } //函数封装 function fn(ele){ var liArr = ele.getElementsByTagName("li"); var spanArr = ele.getElementsByTagName("span"); //2.绑定事件(循环绑定) for(var i=0;i<liArr.length;i++){ //绑定索引值(自定义属性) liArr[i].setAttribute("index",i); liArr[i].onmouseover = function () { //3.书写事件驱动程序(排他思想) //1.点亮盒子。 2.利用索引值显示盒子。(排他思想) for(var j=0;j<liArr.length;j++){ liArr[j].removeAttribute("class"); spanArr[j].removeAttribute("class"); } this.setAttribute("class","current"); spanArr[this.getAttribute("index")].setAttribute("class","show"); } } } </script>
- 方法二
<script type="text/javascript"> var boxArr = document.getElementsByClassName("box") for (var i = 0; i < boxArr.length; i++) { fn(boxArr[i]); } function fn(ele) { var liArr = ele.getElementsByTagName("li"); var spanArr = ele.getElementsByTagName("span"); for (var i = 0; i < liArr.length; i++) { liArr[i].index = i; liArr[i].onclick=function(){ for (var j = 0; j < liArr.length; j++) { liArr[j].className = ''; spanArr[j].className = ''; } this.className = 'current'; spanArr[this.index].className = 'show'; // console.log(1); } } }</script>
0 0
- JS_tab栏切换
- tab栏切换(点击图片切换路径)
- Tab栏切换(一)
- 多Tab栏切换
- jQuery Tab栏切换
- Tab栏切换
- tab栏切换案例
- jQ_Tab栏切换
- tab栏切换原理
- tab栏切换案例
- tab栏切换
- 切换
- 切换
- 切换
- 切换
- 切换
- 切换
- 原生JS banner栏切换
- NumPy之一:基本操作
- 练习 3.3 通过只调整指针(不是数据)来交换两个相邻的元素
- TA blog
- JS_全选反选
- muduo库的Timestamp类剖析
- JS_tab栏切换
- android 平台NDK MD5加密
- muduo库的AtomicIntegerT剖析
- mt5 open close数组起点设置
- mfc基于对话框计算器程序
- Learning Python 020 pass 的用法
- Unique Binary Search Trees II
- Maximum Product Subarray
- mt5 竖线,连接线 方框