JavaScript效果之选项卡
拼了命学习js，想把学到的Javascript效果，可以记在博客里，在记录过程中，加深理解。
gogogo，第一个效果，选项卡。
一、选项卡效果的实现思路
选项卡效果的应用很广泛，几乎所有的网站都会用到选项卡，现在就来写选项卡。
选项卡的实现思路：
两个div，一个用来放在选项卡，一个用来放置每个选项卡内容。
首先，先把放置内容的div隐藏起来display:none，只保留一个显示display：block。
然后，通过点击选项卡，在该添加类的位置上添上属性类。
二、实现
我写的这个选项卡界面特“简洁”，只有说明选项卡该如何写。start~~~
截图：
function setTab(name,carsel,n) //name为名字，carsel为游标，n为tab的数量 { for(var i =1;i<=n;i++) { var oMenu = document.getElementById('one'+i); var oContent = document.getElementById('con_'+name+i); oMenu.className = i == carsel?"hover":""; oContent.style.display = i ==carsel?"block":"none"; } }
<div id="tab_menu"> <ul> <li id="one1" onclick="setTab('one',1,3)">女装</li> <li id="one2" onclick="setTab('one',2,3)">男装</li> <li id="one3" onclick="setTab('one',3,3)">童装</li> </ul> </div> <div id="tab_content"> <div id="con_one1">女装女装女装女装女装</div> <div id="con_one2" style="display:none">男装男装男装男装男装</div> <div id="con_one3" style="display:none">童装童装童装童装童装</div> </div>
上面的Javascript函数，通过一个for循环，来判断用户点击的是哪一个选项卡，然后便获取该选项卡元素。这里的处理是：document.getElementById('one'+i);
获取到的会是id = one1/one2/on3，然后判断，i == carsel?"hover":""; 此时循环的 i 是否会等于游标值，会的话就添加一个hover类上去，改变被点击项的样式。
同样，下面的语句：oContent.style.display = i ==carsel?"block":"none";给当前被点击的选项，设置display为block，即显示出来。
三、完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <link href="" rel="stylesheet"> <style type="text/css"> .tab { width: 600px; height: 400px; background: #CCC; margin: 0 auto; } #tab_menu { width: 200px; height: 400px; float: left; background: #efefef; } #tab_content { width: 400px; height: 400px; float: left; } #con_one1 { background: yellow; width: 400px; height: 400px; } #con_one2 { background: green; width: 400px; height: 400px; } #con_one3 { background: blue; width: 400px; height: 400px; } .hover { background: yellow; } </style> <script type="text/javascript"> function setTab(name,carsel,n) //carsel为游标，n为tab的数量 { for(var i =1;i<=n;i++) { var oMenu = document.getElementById('one'+i); var oContent = document.getElementById('con_'+name+i); oMenu.className = i == carsel?"hover":""; oContent.style.display = i ==carsel?"block":"none"; } } </script> </head> <body> <div class="tab"> <div id="tab_menu"> <ul> <li id="one1" onclick="setTab('one',1,3)">女装</li> <li id="one2" onclick="setTab('one',2,3)">男装</li> <li id="one3" onclick="setTab('one',3,3)">童装</li> </ul> </div> <div id="tab_content"> <div id="con_one1">女装女装女装女装女装</div> <div id="con_one2" style="display:none">男装男装男装男装男装</div> <div id="con_one3" style="display:none">童装童装童装童装童装</div> </div> </div> </body> </html>
四、
补充：
用一个参数来实现
/*------------------一个参数实现--------------------*/ function setTab(n) { var aLi = document.getElementsByTagName('li'); var oContent = document.getElementById('tab_content'); var aDiv = oContent.getElementsByTagName('div'); var i =0; for(i = 0;i<aLi.length; i++) { if(n == i) { aLi[i].className = "hover"; aDiv[i].style.display = "block"; } else { aLi[i].className = ""; aDiv[i].style.display = "none"; } } }
<div id="tab_menu">
<ul>
<!--<li id="one1" onclick="setTab('one',1,3)">女装</li>
<li id="one2" onclick="setTab('one',2,3)">男装</li>
<li id="one3" onclick="setTab('one',3,3)">童装</li>-->
<li id="one1" onclick="setTab(0)" class="hover">女装</li>
<li id="one2" onclick="setTab(1)">男装</li>
<li id="one3" onclick="setTab(2)">童装</li>
</ul>
</div>