CSS tab 选项卡(兼容好)

2024-09-05 12:19:43

字体：大中小

来源：转载

供稿：网友

CSS tab 选项卡，完全兼容常用的浏览器类型，而且代码中含有丰富的注释，方便你的学习和修改。本例中的选项卡在很多网站都会见到，很普通，但很经典，如果感觉灰色不美观的话，自己动手改改代码，这样才能提高哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS tab 选项卡</title><style type="text/css">*{ padding:0px; margin:0px;}body{ text-align:center;font-size:12px;}.page{ width:600px; margin:10px auto;  text-align:left; }/*内容模块 */.tab_mo{ border:1px solid #ccc; border-top:none; padding:10px;}/*菜单模块 */.tab{ border-bottom:1px solid #ccc; /* 菜单模块的底部边框，也就是内容模块的上边框 */ list-style:none; padding:4px 5px 3px 5px; }.tab li{ display:inline; /* 【重点】让li横向排列。*/ font-size:12px; }.tab li a{ padding:3px 4px; /* 因为没有固定高度，所以用填充来调整显示效果。 */border:1px solid #ccc;  /* 菜单项的边框 */color:#888; border-bottom:none; /* 底部无边框 */text-decoration:none;background:#f7f7f7}/*鼠标经过时的样式 */.tab li a:hover{ background:#fff;}/*选中时的样式 */.tab li.no a{ background:#fff; border-bottom:none; /*  隐藏菜单项的底部边框 */position:relative;  /* 【重点】菜单项里面的连接使用了相对定位 */top:1px;            /* 【重点】相对于外层顶部为1像素，正好是底部边框的像素。所以就遮住了ul的底部边框 */color:#000000; font-weight:bold}</style><script type="text/javascript">function tab(a,b,c) { for(i=1;i<=b;i++){ if(c==i){ // 判断选择模块document.getElementById(a+"_mo_"+i).style.display = "block";  // 显示模块内容document.getElementById(a+"_to_"+i).className = "no";   // 改变菜单为选中样式} else{ // 没有选择的模块document.getElementById(a+"_mo_"+i).style.display = "none"; // 隐藏没有选择的模块document.getElementById(a+"_to_"+i).className = "q";  // 清空没有选择的菜单样式} } }</script></head><body><div class="page"><ul class="tab"><li id="tab_to_1" class="no">最新更新</li><li id="tab_to_2">热门排行</li><li id="tab_to_3">最新下载</li><li id="tab_to_4">网页特效</li></ul><div class="tab_mo"><div id="tab_mo_1">最新更新的内容</div><div id="tab_mo_2" style="display:none">热门排行在这里哦</div><div id="tab_mo_3" style="display:none">最新下载在这里呀</div><div id="tab_mo_4" style="display:none">精品网页特效，请点击链接</div></div></div></body></html>

上一篇：标准CSS+Js下拉菜单

下一篇：背景自适应的圆角滑动门菜单