div+css 实现tabs标签的示例代码_html/css

div+css 实现tabs标签的示例代码_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:27:09

Original

1251 people have browsed it

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>

Copy after login

精彩推荐：

子div相对父div底部对齐代码

div+css的相对定位和绝对定位

div+css布局之offsetLeft,Left,clientLeft的区别

十天学会web标准第二天一列布局

十天学会web标准第一天XHTML CSS基础知识

如何将网页版式布局下的二级菜单不向左显示而是向下显示（源码）