下面贴出我所认为的5种做法,可能在部分内容的意思解释上会有误,欢迎大家提醒,谢谢!易闻网
一、遍历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:
1
2
3
id="c0"class="ct">11111111111111111111
id="c1">222222222222222222
id="c2">3333333333333333333
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:
id="tab">
class="tab"
οnmοuseοver="changeTab(this)">1
οnmοuseοver="changeTab(this)">2
οnmοuseοver="changeTab(this)">3
class="ct">11111111111111111111
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
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
三、传参法
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[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:
id="tab">
class="tab">1
2
id="ct">
class="ct">11111111111111111111
js:
function changetab(){
vartabs=document.getElementByIdx_x("tab").getElementsByTagName_r("span");
for
(i=0;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[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);
思路:思路和上面一样,写法略有不同。得用事件监听的方法写语句。易闻网