div css 横向tab 同一菜单中如何跳转页面？ 用css+div做成的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 runat="server"> <title>使用JavaScript实现的tab</title> <style type="text/css"> /*设置超链接样式*/ a { color: #5086a5; text-decoration: none; font-size: 12px; } a:hover { color: #5086a5; text-decoration: underline; font-size: 12px; } a:visited { color: #5086a5; font-size: 12px; } /*整个tab层居中，宽度为600px*/ #tabDiv { width:600px; margin:1em auto; padding-bottom: 10px; border-right: #b2c9d3 1px solid; border-top: #b2c9d3 1px solid; border-left: #b2c9d3 1px solid; border-bottom: #b2c9d3 1px solid; background: #ffffff; } /*tab头的样式*/ #tabsHead { padding-left: 0px; height: 26px; background-color: #e8f7fc; font-size: 1em; margin: 1px 0px 0px; color: #5086a5; line-height: 26px; } /*已选tab头（超链接）的样式*/ .curtab { padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; border-right: #b2c9d3 1px solid; font-weight: bold; float: left; cursor: pointer; background: #ffffff; } /*未选tab头（超链接）的样式*/ .tabs { border-right: #c1d8e0 1px solid; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; font-weight: normal; float: left; cursor: pointer; } p { font-size:9pt; margin-left:20pt; } </style> <script language="javascript" type="text/jscript"> <!-- //显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID） function showTab(tabHeadId,tabContentId) { //tab层 var tabDiv = document.getElementById("tabDiv"); //将tab层中所有的内容层设为不可见 //遍历tab层下的所有子节点 var taContents = tabDiv.childNodes; for(i=0; i<taContents.length; i++) { //将所有内容层都设为不可见 if(taContents[i].id!=null && taContents[i].id != 'tabsHead') { taContents[i].style.display = 'none'; } } //将要显示的层设为可见 document.getElementById(tabContentId).style.display = 'block'; //遍历tab头中所有的超链接 var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a'); for(i=0; i<tabHeads.length; i++) { //将超链接的样式设为未选的tab头样式 tabHeads[i].className='tabs'; } //将当前超链接的样式设为已选tab头样式 document.getElementById(tabHeadId).className='curtab'; document.getElementById(tabHeadId).blur(); } --> </script></head><body> <form id="form1" runat="server"> <!--tab控件--> <div id="tabDiv"> <!--tab头--> <div id="tabsHead"> <a class="curtab" id="tabs1" href="javascript:showTab('tabs1','tabContent1')">钗头凤</a> <a class="tabs" id="tabs2" href="javascript:showTab('tabs2','tabContent2')">卜算子·咏梅</a> </div> <div id="tabContent1" style="display:block">
http://www.lanrentuku.com/down/js/biaoqian-285/是这个效果吗？下载地址 http://www.lanrentuku.comjs/d285.zip
div css 横向tab 同一菜单中如何跳转页面？~
http://www.lanrentuku.com/down/js/biaoqian-285/是这个效果吗？下载地址 http://www.lanrentuku.comjs/d285.zip
div css 横向tab 同一菜单中如何跳转页面？~
在一级导航栏下加一层div，配合javascript，鼠标悬浮在哪个菜单时，该div层就显示其子菜单项目。
加上target="_self"就可以了。
