javascript 关闭strict mode js 关闭当前tab

转载

IT独行侠 2024-08-09 13:22:55

文章标签 JS切换选项卡 js html css i++ 文章分类 JavaScript 前端开发

一、遍历ID法

css：
 body,h2{margin:0;}
 body{font:12px/1.5 "宋体",tahoma,arial;}
 h2{width:500px;height:50px;margin:100pxauto0;color:red;border:1px solid gray;}
 h2 span{width:80px;height:50px;line-height:50px;text-align:center;float:left;}
 .tab{color:yellow;background-color:#999;}
 div{width:500px;height:200px;margin:0 auto;border:1px solid blue;display:none;}
 .ct{display:block;}
 html：
 <h2>
 <spanid="tab0"class="tab"οnmοuseοver="changeTab()">1</span>
 <spanid="tab1"οnmοuseοver="changeTab1()">2</span>
 <spanid="tab2"οnmοuseοver="changeTab2()">3</span>
 </h2>
 <div id="c0"class="ct">11111111111111111111</div>
 <div id="c1">222222222222222222</div>
 <div id="c2">3333333333333333333</div>
 js：
 vartab0=document.getElementByIdx_x("tab0");vartab1=document.getElementByIdx_x("tab1");vartab2=document.getElementByIdx_x("tab2");    varc0=document.getElementByIdx_x("c0");varc1=document.getElementByIdx_x("c1");varc2=document.getElementByIdx_x("c2");
  
 functionchangeTab(){ tab0.className="tab";tab1.className="";tab2.className="";c0.className="ct";c1.className="";
 c2.className="";}
  
 functionchangeTab1(){ tab0.className="";tab1.className="tab";tab2.className="";c0.className="";
 c1.className="ct";c2.className="";}
  
 functionchangeTab2(){ tab0.className="";tab1.className="";tab2.className="tab";c0.className="";
 c1.className="";c2.className="ct";}

思路：给每个要控制到的标签都设置id，在js里分别声明，做到精确控制。其次给鼠标要点击的标签添加事件（onclick等）。
然后就是写函数functionchangeTab()，functionchangeTab1()，functionchangeTab2()让它们各自控制各自的内容，该添加class的添加class，该删除class的删除。
缺陷：可扩展性很差，得再添加id，事件，函数。
二、this法

css：
 body,h2{margin:0;}
 body{font-size:12px;font-family:"宋体",tahoma,arial;}
 h2{width:500px;height:50px;margin:100pxauto0;color:red;border:1px solid gray;}
 h2span{width:80px;height:50px;line-height:50px;text-align:center;float:left;}
 .tab{color:yellow;background-color:#999;cursor:pointer;}
 #tabdiv{width:500px;height:200px;margin:0 auto;border:1px solid blue;display:none;}
 #tab.ct{display:block;}
 html：
 <div id="tab">
 <h2>
 <span     class="tab"   οnmοuseοver="changeTab(this)">1</span>
 <span     οnmοuseοver="changeTab(this)">2</span>
 <span     οnmοuseοver="changeTab(this)">3</span>
 </h2>
 <div class="ct">11111111111111111111</div>
 <div>222222222222222222</div>
 <div>3333333333333333333</div>
 </div>
 js：
 var  tabs=document.getElementByIdx_x("tab").getElementsByTagName_r("span");
 var  cts=document.getElementByIdx_x("tab").getElementsByTagName_r("div");
 function     changeTab(mouseover){ 
       for(i=0;i<tabs.length;i++){
         if(tabs[i]==mouseover){
           tabs[i].className="tab";
           cts[i].className="ct";
        }
        else{
         tabs[i].className="";
         cts[i].className="";
         }
    }
 }

思路：如果细心看，没个标签上的id少了，函数少了，有点像css里面的class，一处书写，遍处用，它带来的优点就是可扩展性很强。
函数function changeTab(mouseover)里面的mouseover是接受this的传参，它会在后面传给鼠标所经过的tabs（即span）。 for(i=0;i<tabs.length;i++)用来确定有多少个span元素存在，并且在鼠标经过是执行循环，确定是给哪个span加上 class，同时给div也加上class，使其能够显示。此外要考虑到别的span以及它们相关联的div们，它们的class都需要给清空。
三、传参法

html和css大致同上，恕不复述。
 不同处：html的this需要改为0，1，2.....（即从0开始有几个写几个）
 js：
 var     tabs=document.getElementByIdx_x("tab").getElementsByTagName_r("span");
 var     cts=document.getElementByIdx_x("tab").getElementsByTagName_r("div");
 function    changeTab(num){
 for(i=0;i<tabs.length;i++){
 tabs[i].className="";
 cts[i].className="";
 }
 tabs[num].className="tab";
 cts[num].className="ct";
 }

思路：其实和this的大致相同，不过专门列出来，有2个原因。
其一：这次函数里的不是一个if语句，即不能像上面那个那样理解（即如果点击这个span就给它和它相关的div添加class，如果不是就不添加）。这里是 for循环语句，它是不断的循环判断，当然我们这里只有简单的循环，就是去掉已存在的class样式，然后通过传参，在函数里给当前选定的span及其想同时起作用的元素加上样式。这里有个困扰的问题，为什么要先清空？！答案是为了不重叠，需要先把所有的class给去掉【因为默认的第一个，或者已经点击过的加载有样式，需要给它先去掉】。
其二：它的传参和this不同，它需要在html里面写不同的参数这样才能一个个区别开来。就像现实生活里一样，说这个，那个，大家都很明白说的哪个,但是这里如果参数一样了，就没法区别了，要明白这里的num这个参数不仅仅代表一个，是代表0，1，2.....这些一个个我们点到的个体，我们点到1，它成为1，我们点到2，它成为2。
四、数组法

css：
 body,h2{margin:0;}
 body{font-size:12px;font-family:"宋体",tahoma,arial;}
 h2{width:500px;height:50px;margin:100pxauto0;color:red;border:1px solid gray;}
 h2    span{width:80px;height:50px;line-height:50px;text-align:center;float:left;}
 #tab  .tab{color:yellow;background-color:#999;}
 #ct  div{width:500px;height:200px;margin:0 auto;border:1px solid blue;display:none;}
 #ct  .ct{display:block;}
 html：
 <h2 id="tab">
 <span  class="tab">1</span>
 <span>2</span>
 </h2>
 <div id="ct">
 <div class="ct">11111111111111111111</div>
 <div>222222222222222222</div>
 </div>
 js：
 function    changetab(){
 vartabs=document.getElementByIdx_x("tab").getElementsByTagName_r("span");
 for (i=0;i<tabs.length;i++){
 tabs[i].οnclick=tab;
    }
 }
 function    tab(){
 var   tabs=document.getElementByIdx_x("tab").getElementsByTagName_r("span");
 var   cts=document.getElementByIdx_x("ct").getElementsByTagName_r("div");
 for (i=0;i<tabs.length;i++){
 tabs[i].className="";
 cts[i].className="";
 if (tabs[i]==this){
 tabs[i].className="tab";
 cts[i].className="ct";
 }
 }
 }
 window.οnlοad=function (){
 changetab();
 }

思路：在这种写法中，我们发现css，html和js已经完全分离，这不正是大家所正追求的吗？！所以它值得我们去特别关注，熟练使用，明白其中原理。
function changetab()目的是在点击时，给tabs（当前所点击span）执行函数function tab()，因为它只用到span，故只声明一个即可。
function tab()里面span和div都要用到，故全部声明。在这个函数里面我们可以发现它集成了前面的循环和if判断语句。
当点击时，先走for循环语句，把有class都把它们的class给清除了，然后通过判断给当前的tabs（span）加上class，同时给相关联的 cts（div）也添加上class，让其显示。！我们需要注意到this原来是不用特意传参就可以知道是当前点击的对象的，感觉真是智能那~
此外tabs[i].className="tab";这句可以不用非写在if语句里，它可以在for循环语句里。因为tabs[i]==this，即写成：
this.className="tab";
注意window.οnlοad=function (){changetab();}这条命令意思是在页面加载完成后执行里面的函数，里面的可以写函数名（即changetab()全写），也可以只写句柄（即changetab），但后者使得页面只能执行这一条函数。
优点：结构，样式，行为完全分离，可扩展性非常高。
五.事件监听法
html和css同上。
js不同处：
【多了下面这条添加监听事件的函数】

function addEventHandler(target,type,func){
 if(target.addEventListener){
 target.addEventListener(type,func,false);
 }
 else{target["on"+type]=func;}
 }

【其次】tabs[i].οnclick=tab;换为addEventHandler(tabs[i],"click",tab);
思路：思路和上面一样，写法略有不同。得用事件监听的方法写语句。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。