dom03排他性tab栏切换效果

    xiaoxiao2021-03-25  22

    排他性:先去掉所有,再绑定自身

    <script> var inputs=document.getElementsByTagName('input'); for (var i = 0; i <inputs.length; i++) { inputs[i].onclick=function () { //利用排他性先去掉所有按钮 for (var i = 0; i <inputs.length; i++) { inputs[i].className="";// }; this.className="castom";//此时绑定的是每个按钮 } }; </script>

    专门用来操作标签属性的方法:获取,设置,移除

    <script> var box=document.getElementById('box'); //专门用来操作标签属性的方法 //获取 任何标签中的属性都可以获取getAttribute("属性名") console.log(box.getAttribute("a")); //设置 任何标签中的属性都可以设置setAttribute("属性名","属性值") box.getAttribute("class","cls"); //移除 任何标签中的属性都可以移除 box.removeAttribute("a"); </script>

    tab栏切换效果:

    <script> var box=document.getElementById('box'); var spans=box.getElementsByTagName('spans'); var lis=box.getElementsByTagName('li'); //点击span让当前span高亮 for (var i = 0; i <spans.length; i++) { //spans[i].index=i;//自定义属性 spans[i].setAttribute("index",i); spans[i].onclick=function () { //排他 //干掉所有人 for (var i = 0; i <spans.length; i++) { //spans[i].className=""; spans[i].removeAttribute("class"); }; //this.className="current";//留下自己 this.setAttribute("class","current"); //让下面对应的li也显示出来 for (var i = 0; i <lis.length; i++) { //lis[i].className=""; lis[i].removeAttribute("class"); }; //var index=this.index; var index=this.getAttribute("index"); //lis[index].className="current"; lis[index].setAttribute("class","current"); } }; </script>
    转载请注明原文地址: https://ju.6miu.com/read-50419.html

    最新回复(0)