下拉菜单的导航条

2024-04-27 13:59:42

字体：大中小

来源：转载

供稿：网友

1. 将下面的<a href="http://www.vevb.com/article.asp?typeid=38">CSS</a>和<a href="http://www.vevb.com/article.asp?typeid=40">DHTML</a>脚本加入页面的<HEAD>部分：<style type="text/css">/*Eric Meyer's based CSS tab*/#tablist{padding: 3px 0;margin-left: 0;margin-bottom: 0;margin-top: 0.1em;font: bold 12px Verdana;}#tablist li{list-style: none;display: inline;margin: 0;}#tablist li a{text-decoration: none;padding: 3px 0.5em;margin-left: 3px;border: 1px solid #778;border-bottom: none;background: white;}#tablist li a:link, #tablist li a:visited{color: navy;}#tablist li a:hover{color: #000000;background: #C1C1FF;border-color: #227;}#tablist li a.current{background: lightyellow;}</style><scr<a href="http://ip.vevb.com/">ip</a>t type="text/<a href="http://www.vevb.com/article.asp?typeid=160">java</a>script">/************************************************ Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code***********************************************/var selectedtablink=""var tcischecked=falsefunction handlelink(aobject){selectedtablink=aobject.hreftcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : falseif (document.getElementById && !tcischecked){var tabobj=document.getElementById("tablist")var tabobjlinks=tabobj.getElementsByTagName("A")for (i=0; i<tabobjlinks.length; i++)tabobjlinks[i].className=""aobject.className="current"document.getElementById("tabiframe").src=selectedtablinkreturn false}elsereturn true}function handleview(){tcischecked=document.tabcontrol.tabcheck.checkedif (document.getElementById && tcischecked){if (selectedtablink!="")window.location=selectedtablink}}</script>如果想更改<a href="http://www.vevb.com/tag-3.html">分页</a>标签的外观(也就是颜色)，编辑CSS就可以了。没有必要更改DHTML脚本。2. 把下面的代码加入到<BODY>部分：<body><ul id="tablist"><li><a class="current" href="http://www.google.com" onClick="return handlelink(this)">Google</a></li><li><a href="http://www.yahoo.com" onClick="return handlelink(this)">Yahoo</a></li><li><a href="http://www.msn.com" onClick="return handlelink(this)">MSN</a></li><li><a href="http://www.news.com" onClick="return handlelink(this)">News.com</a></li><li><a href="http://www.dynamicdrive.com" onClick="return handlelink(this)">Dynamic Drive</a></li></ul><iframe id="tabiframe" src="http://www.google.com" width="98%" height="350px"></iframe><form name="tabcontrol" style="margin-top:0"><input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.</form>上面的HTML代码描述了tab的链接和IFRAME标记，用以载入外部页面。把URL改成你需要的。现在，如果你有很多的分页链接，你可以增加一个分隔符，把它们显示在不同的行上。 <ul id="tablist"><li><a class="current" href="#">Google</a></li><li><a href="#">Yahoo</a></li><li><a href="#">MSN</a></li><div style="margin-bottom: 8px"></div><li><a href="#">News.com</a></li><li><a href="#">Dynamic Drive</a></li></ul>

上一篇：关联菜单很有用本站推荐一下

下一篇：时隐时现的导航菜单脚本