当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > 较好的视觉效果的网页选项卡
No. « ‹ 2 3 4 5 › »
关键字
“选项卡”经常会被混同为“滑动门”,滑动门只是一种背景自适应内容的实现方法,不只可以应用在导航菜单,一样也可以应用在其他地方。例如选项卡中就可以使用这种技术。
“选项卡”一般和JavaScirpt及Ajax结合使用,以达到节约版面、无刷新页面更新信息、以及一些比较好的视觉效果。一般的选项卡都需要JavaScript程序来配合,完成切换的效果。
<!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>选项卡</title> <style type="text/css"> <!-- /* 初始化 */ body { font: 12px/1 "宋体", SimSun, serif; background:#fff; color:#000; } ul, li, dl, dt, dd { margin:0; padding:0; /* 清除浏览器默认的margin和padding值 */ } ul, li { list-style:none outside; /* 清除浏览器中列表项默认的占位 */ } a { text-decoration:none; } img { border:0; } /* 选项卡整体外观定义 */ .tabList { width:400px; height:160px; overflow:hidden; } .tabList .tabBox { height:100%; position:relative; background:#09c; } .tabList .tabBox li { float:left; width:25%; text-align:center; } .tabList h4 { margin:0; height:26px; font-size:1em; line-height:22px; } .tabList h4 a { color:#039; font-weight:normal; display:block; background:#bfeafd url(/upload/tech/20091012/20091012161639_0d0fd7c6e093f7b804fa0150b875b868.png) no-repeat; padding-left:5px; } .tabList h4 a span { display:block; background:url(/upload/tech/20091012/20091012161639_0d0fd7c6e093f7b804fa0150b875b868.png) no-repeat top right; padding-right:5px; } .tabList h4 a:hover, .tabList .tabOn h4 a{ background-position:0 -50px; } .tabList h4 a:hover span, .tabList .tabOn h4 a span { background-position:right -50px; } .tabList .tabContentBox li{ width:auto; margin-top:0; } .tabList .tabContentBox { width:390px; height:130px; border:1px solid #069; text-align:left; overflow:hidden; background:#fff; position:absolute; top:22px; left:0; display:none; margin:4px; } .tabList li:hover .tabContentBox, .tabList .tabOn .tabContentBox { display:block; } /* 以下是对各项内容的CSS定义 */ .tabList .tabContentBox .blog, .tabList .tabContentBox .group { color:#999; line-height:2em; margin:5px; } .tabList .tabContentBox .blog dt, .tabList .tabContentBox .group dt, .tabList .tabContentBox .blog dd, .tabList .tabContentBox .group dd{ float:left; border-bottom: 1px dotted #9cf; } .tabList .tabContentBox .blog dt, .tabList .tabContentBox .group dt { width:60%; white-space:nowrap; overflow:hidden; clear:left; font-size:1.1em; } .tabList .tabContentBox .blog dt a, .tabList .tabContentBox .group dt a { color:#039; display:block; margin-left:5px; padding-left:12px; background: url(/upload/tech/20091012/20091012161639_0d7de1aca9299fe63f3e0041f02638a3.png) no-repeat 5px 11px; } .tabList .tabContentBox .blog dt a:hover, .tabList .tabContentBox .group dt a:hover { color:#f90; background-position:5px -19px; } .tabList .tabContentBox .blog dd, .tabList .tabContentBox .group dd { color:#0cf; width:20%; float:left; white-space:nowrap; overflow:hidden; } .tabList .tabContentBox .blog dd a, .tabList .tabContentBox .group dd a { color:#069; } .tabList .tabContentBox .blog dd a:hover, .tabList .tabContentBox .group dd a:hover { color:#f90; } .tabList .tabContentBox .album li, .tabList .tabContentBox .share li{ width:24.9%; float:left; padding-top:15px; text-align:center; } --> </style> <script type="text/javascript" language="javascript"> <!-- window.onload = tabEffect; function tabEffect() { var allElements = document.getElementsByTagName('*'); for (var i=0; i<allElements.length; i++) { if (allElements[i].className.indexOf('tabOption') >= 0) { allElements[i].onmouseover = mouseOver; } } } function mouseOver() { tabList = this.parentNode; tabOptions = tabList.getElementsByTagName("li"); for (var i=0; i<tabOptions.length; i++) { if (tabOptions[i].className.indexOf('tabOption') >= 0) { tabOptions[i].className = "tabOption"; } } this.className += " tabOn"; } --> </script> </head> <body> <div class="tabList" id="tabList1"> <ul class="tabBox"> <li class="tabOption tabOn"><h4><a href="/blog/" title="单击,跳转到所有[日志]列表"><span>日志</span></a></h4> <div class="tabContentBox"> <dl class="tabContent blog"> <dt><a href="http://www.ruanchen.com/"CURSOR: hand" onfocus="this.blur()" onclick="runEx('code')" type="button" value="运行代码" /> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
登陆 还没注册?