/* CSS样式制作 */ * { padding:0px; margin:0px; } a { text-decoration:none; color:black; } a:hover { text-decoration:none; color:#336699; } #tab { width:270px; padding:5px; height:150px; margin:20px; } #tab ul { list-style:none; display:; height:30px; line-height:30px; border-bottom:2px #C88 solid; } #tab ul li { background:#FFF; cursor:pointer; float:left; list-style:none height:29px; line-height:29px; padding:0px 10px; margin:0px 10px; border:1px solid #BBB; border-bottom:2px solid #C88; } #tab ul li.on { border-top:2px solid gray; border-bottom:2px solid #FFF; } #tab div { height:100px; width:250px; line-height:24px; border-top:none; padding:1px; border:1px solid #336699; padding:10px; } .hide { display:none; }
先分析基本思路。首先编写HTML,然后再加载样式,最后用JS修改相应的DOM,达到更改选项卡和内容的目的。HTML显示的是所有与文字有关的信息