最近闲暇时候在研究前端的样式和js，以前都是从w3school上看看那些选择器和DOM操作方法很少去实际做demo来研究，做的过程当中才真切感觉到纸上得来终觉浅，看得懂跟能做出东西完全两码事，尤其在定位那块，要吃透并且灵活运用，确实不容易。下面是自己练习时写的实例，感觉还挺有价值的，因为涉及的知识点还是挺全面的，新手的话好好看看，应该有不少收获。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> body{ font-family: "microsoft yahei"; font-size: 18px; color: #999; padding:0; margin:0; } .hide{ display:none; } #tabs { width: 345px; height: 300px; margin: 25px auto; /* 注意这里的居中显示 */ } #tabs ul { padding-left: 50px; /* 标题整体后移 */ border-bottom: 2px solid saddlebrown; list-style: none; /* 去除排头的点 */ height: 30px; margin: 0; color: black; } /*#tabs ul li {*/ /*display: inline-block;*/ /* 30%;*/ /*height: 32px;*/ /*padding-top: 12px;*/ /*border: 1px solid #aaa;*/ /*border-bottom: none;*/ /*}*/ #tabs ul li { /* 注意这种float定位的方式与我上面直接修改为inline-block是有差别的，看上去好像一样，但在边框部分是有细微差异的， 因为浮动定位实际上已经将li从ul中剥离出来了，其不再以ul的子元素进行展示，所以这时候它的边框能覆盖父级ul的边框 */ float: left; height: 28px; /* 注意这里li高度的设置细节，恰好与父级ul相差2px，这也正是ul的border宽度*/ line-height: 28px; /* 设置行高与字体一样大小以居中显示 */ padding: 0px 15px; border: 1px solid #aaa; border-bottom: none; } #tabs ul li.on{ border-top: 2px solid saddlebrown; border-bottom: 2px solid #fff; /* 将选中的li的底部边框修改为白色便可覆盖ul设置的下边框，达到上下一体的效果 */ } #tabs div { line-height: 1.5em; border: 1px solid #336699; border-top: none; text-align: center; padding-top: 10px; padding-bottom: 12px; padding-right: 18px; } </style> </head> <body> <!-- HTML页面布局 --> <div id="tabs"> <ul> <li class="on">客至</li> <li>蜀相</li> <li>黄鹤楼</li> </ul> <div> 舍南舍北皆春水，但见群鸥日日来。<br> 花径不曾缘客扫，蓬门今始为君开。<br> 盘飧市远无兼味，樽酒家贫只旧醅。<br> 肯与邻翁相对饮，隔篱呼取尽馀杯！<br> </div> <div class="hide"> 丞相祠堂何处寻？锦官城外柏森森。<br> 映阶碧草自春色，隔叶黄鹂空好音。<br> 三顾频烦天下计，两朝开济老臣心。<br> 出师未捷身先死，长使英雄泪满襟！<br> </div> <div class="hide"> 昔人已乘黄鹤去，此地空余黄鹤楼。<br> 黄鹤一去不复返，白云千载空悠悠。<br> 晴川历历汉阳树，芳草萋萋鹦鹉洲。<br> 日暮乡关何处是，烟波江上使人愁。<br> </div> </div> <script type="text/javascript"> var myTabs = document.getElementById("tabs"); var myDivs = myTabs.getElementsByTagName("div"); var myUl = myTabs.getElementsByTagName("ul")[0]; var myLis = myUl.getElementsByTagName("li"); for (var i = 0,len = myLis.length; i < len; i++) { // 这里将被绑定事件的li的索引先放入其对应对象的属性中，方便后面在改变对应div的class属性的时候调用 myLis[i].index = i; myLis[i].onclick = function () { for (var j = 0; j < len; j++) { myLis[j].className = ""; myDivs[j].className = "hide"; } this.className = "on"; myDivs[this.index].className = ""; } } </script> </body> </html>