                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /Tab選項(xiàng)卡切換效果

代碼，用了getStyle函數(shù)

<!doctype?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style?type="text/css">
?*?{
????????????margin:?0;
?padding:?0;
?font-size:?13px;
?list-style:?none;
?}

????????.menu?{
????????????width:?210px;
?margin:?50px?auto;
?border:?1px?solid?#ccc;
?}

????????.menu?p?{
????????????height:?25px;
?line-height:?25px;
?font-weight:?bold;
?background:?#eee;
?border-bottom:?1px?solid?#ccc;
?cursor:?pointer;
?padding-left:?5px;
?}

????????.menu?div?ul?{
????????????display:?none;
?}

????????.menu?li?{
????????????height:?24px;
?line-height:?24px;
?padding-left:?5px;
?}
????</style>
????<script?type="text/javascript">
?window.onload?=?function?()?{
????????????var?titles?=?document.getElementsByTagName("p");
?var?uls?=?document.getElementsByTagName("ul");
?for(var?i?=?0;?i<titles.length;?i++){
????????????????titles[i].index?=?i;
?titles[i].onclick?=?function(){
//????????????????????for(var?j?=?0;?j<titles.length;?j++){
//????????????????????????uls[j].style.display?=?"none";
//????????????????????}
?if(getStyle(uls[this.index],"display")?==?"none"){
????????????????????????uls[this.index].style.display?=?"block";
?}else?if(getStyle(uls[this.index],"display")?==?"block"){
????????????????????????uls[this.index].style.display?=?"none";
?}

????????????????};
?}
????????};
?function?getStyle(obj,?attr)?{
????????????if?(obj.currentStyle)?{
????????????????return?obj.currentStyle[attr];
?}
????????????else?{
????????????????return?getComputedStyle(obj,?false)[attr];
?}
????????}
????</script>
</head>
<body>
<div?class="menu"?id="menu">
????<div>
????????<p>Web前端</p>
????????<ul?style="display:block">
????????????<li>JavaScript</li>
????????????<li>DIV+CSS</li>
????????????<li>jQuery</li>
????????</ul>
????</div>
????<div>
????????<p>后臺(tái)腳本</p>
????????<ul>
????????????<li>PHP</li>
????????????<li>ASP.net</li>
????????????<li>JSP</li>
????????</ul>
????</div>
????<div>
????????<p>前端框架</p>
????????<ul>
????????????<li>Extjs</li>
????????????<li>Esspress</li>
????????????<li>YUI</li>
????????</ul>
????</div>
</div>
</body>
</html>