1. First create the tab and the div of the tab content.
2. Write the display and hide styles of the selected tab and tab content div.
3. Write a js method to display the corresponding tab content according to the selected tab.
<!doctype html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function doClick(o){ //当前被中的对象设置css o.className="nav_current"; var j; var id; var e; //遍历所有的页签，没有被选中的设置其没有被选中的css for(var i=1;i<=7;i++){ //i<7 多少个栏目就填多大值 id ="nav"+i; j = document.getElementById(id); e = document.getElementById("sub"+i); if(id != o.id){ j.className="nav_link"; e.style.display = "none"; }else{ e.style.display = "block"; } } } </script> <style type="text/css" media="screen"> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0; padding:0 } fieldset, img { border:0 none } :focus { outline:0 } .dis{display:block;} .undis{display:none;} ol, ul { list-style:none } .fr { display:inline; float:right!important } .fl { display:inline; float:left!important } .show { display:block } .hide { display:none } .highlight { color:#F30!important } .important { font-weight:bold!important } .center { text-align:center!important } body { font:12px/1.5 tahoma, sans-serif; color:#333 } a { text-decoration:none; color:#333 } a:hover { text-decoration:underline; color:#E30751 } .nav_current{ float:left;background:#FFF; color:#F00; } .nav_link{ float:left;} .nav_current:hover ,.nav_link:hover{ color:#FF6600;} #dww-menu { width:978px; overflow:hidden; border:1px #dcdcdc solid; } #dww-menu .mod-hd { overflow:hidden; height:30px; line-height:30px; position:relative; background:#CCCCCC repeat-x 0 0 } #dww-menu .mod-hd li { float:left; cursor:pointer; text-align:center; height:30px; line-height:30px; padding:0 10px; letter-spacing:1px; text-transform:uppercase; border-right:1px #dcdcdc solid } #dww-menu .mod-hd li.hover { font-weight:900; background:#FFF } #dww-menu .mod-bd { padding:5px 10px } #dww-menu .mod-bd div {color:#BFBFBF; line-height:24px } #dww-menu .mod-bd div.show { display:block } #dww-menu .mod-bd div a { display:inline-block; padding:0 4px } </style> <base target="_blank" /> </head> <body> <div > <div id="dww-menu" class="mod-tab"> <div class="mod-hd"> <ul class="tab-nav"> <li class="nav_current" id="nav1" onMouseOver="javascript:doClick(this)">标签1</li> <li class="nav_link" id="nav2" onMouseOver="javascript:doClick(this)">标签2</li> <li class="nav_link" id="nav3" onMouseOver="javascript:doClick(this)">标签3</li> <li class="nav_link" id="nav4" onMouseOver="javascript:doClick(this)">标签4</li> <li class="nav_link" id="nav5" onMouseOver="javascript:doClick(this)">标签5</li> <li class="nav_link" id="nav6" onMouseOver="javascript:doClick(this)">标签6</li> <li class="nav_link" id="nav7" onMouseOver="javascript:doClick(this)">标签7</li> </ul> </div> <div class="mod-bd"> <div class="dis" id="sub1"> 标签内容1 </div> <div class="undis" id="sub2"> 标签内容2 </div> <div class="undis" id="sub3"> 标签内容3 </div> <div class="undis" id="sub4"> 标签内容4 </div> <div class="undis" id="sub5"> 标签内容5 </div> <div class="undis" id="sub6"> 标签内容6 </div> <div class="undis" id="sub7"> 标签内容7 </div> </div> </div> </div> </body> </html>
Excellent recommendation:
The bottom alignment code of child div relative to the parent div
Relative positioning of div css and Absolute positioning
The difference between offsetLeft, Left and clientLeft in div css layout
Learning web standards in ten days, second day, one-column layout
Learning web standards in ten days, first day XHTML Basic knowledge of CSS
How to display the secondary menu under the web page layout not to the left but downwards (source code)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
