今天小编跟大家讲解下有关div css 实现tabs标签的思路及示例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关div css 实现tabs标签的思路及示例代码 的相关资料，希望小伙伴们看了有所帮助。
1、创建页签 以及页签内容的div。 2、编写被选中的页签和页签内容div显示、隐藏的样式。 3、编写js方法 根据被选中的页签 显示相应的页签内容。 例如： 复制代码代码如下: <!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>来源：爱蒂网
