Home > Article > Web Front-end > 请问这段Tab选项卡的代码为什么不起作用？_html/css_WEB-ITnose
请问这段Tab选项卡的代码为什么不起作用？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:37:51917browse
<!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=utf-8" /><title>无标题文档</title><style type="text/css">body { text-align:center;}.nTab { float:left; font-family:"宋体", arial; font-size:12px; width:600px; margin:0 auto;}.nTab .TabTitle { clear:both; height:28px; overflow:hidden;}.nTab .TabTitle ul { margin:0; padding:0;}.nTab .TabTitle li { float:left; width:60px; height:28px; cursor:pointer; list-style-type:none;}.nTab .TabTitle .active { background-image:url(a.jpg);}.nTab .TabTitle .normal { background-image:url(b.jpg);}.nTab .TabContent { margin:0 auto; width:auto;}.none { display:none;}</style><script type="text/javascript">function nTabs(thisObj,Num){ if (thisObj.className=="active") return; var idUL=thisObj.parentNode.id; var LIs=document.getElementById("idUL").getElementsByTagName("li"); for (i=0;i<LIs.length;i++) { if (i==Num) { thisObj.className="active"; document.getElementById(idUL+"_Content"+i).style.display="block"; } else { LIs[i].className="normal"; document.getElementById(idUL+"_Content"+i).style.display="none"; } }}</script></head><body><div class="nTab"><div class="TabTitle"><ul id="myTab0"><li class="active" onmouseover="nTabs(this,0);">源?首?</li><li class="normal" onmouseover="nTabs(this,1);">最新更新</li><li class="normal" onmouseover="nTabs(this,2);">下?排行</li><li class="normal" onmouseover="nTabs(this,3);">源?分?</li><li class="normal" onmouseover="nTabs(this,4);">??特效</li></ul></div><div class="TabContent"><div id="myTab0_Content0"><a href="#">源?首?</a></div><div id="myTab0_Content1" class="none"><a href="#">最新更新</a></div><div id="myTab0_Content2" class="none"><a href="#">下?排行</a></div><div id="myTab0_Content3" class="none"><a href="#">源?分?</a></div><div id="myTab0_Content4" class="none"><a href="#">??特效</a></div></div></div></body></html> a.jpg
b.jpg
回复讨论(解决方案)
改成这样
<!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=utf-8" /><title>无标题文档</title><style type="text/css">body { text-align:center;}.nTab { float:left; font-family:"宋体", arial; font-size:12px; width:600px; margin:0 auto;}.nTab .TabTitle { clear:both; height:28px; overflow:hidden;}.nTab .TabTitle ul { margin:0; padding:0;}.nTab .TabTitle li { float:left; width:60px; height:28px; cursor:pointer; list-style-type:none;}.nTab .TabTitle .active { background-image:url(a.jpg);}.nTab .TabTitle .normal { background-image:url(b.jpg);}.nTab .TabContent { margin:0 auto; width:auto;}.none { display:none;}</style><script type="text/javascript">function nTabs(thisObj,Num){ if (thisObj.className=="active") return; var idUL="myTab0"; var LIs=document.getElementById(idUL).getElementsByTagName("li"); for (i=0;i<LIs.length;i++) { if (i==Num) { thisObj.className="active"; document.getElementById(idUL+"_Content"+i).style.display="block"; } else { LIs[i].className="normal"; document.getElementById(idUL+"_Content"+i).style.display="none"; } }}</script></head><body><div class="nTab"><div class="TabTitle"><ul id="myTab0"><li class="active" onmouseover="nTabs(this,0);">源?首?</li><li class="normal" onmouseover="nTabs(this,1);">最新更新</li><li class="normal" onmouseover="nTabs(this,2);">下?排行</li><li class="normal" onmouseover="nTabs(this,3);">源?分?</li><li class="normal" onmouseover="nTabs(this,4);">??特效</li></ul></div><div class="TabContent"><div id="myTab0_Content0"><a href="#">源?首?</a></div><div id="myTab0_Content1" class="none"><a href="#">最新更新</a></div><div id="myTab0_Content2" class="none"><a href="#">下?排行</a></div><div id="myTab0_Content3" class="none"><a href="#">源?分?</a></div><div id="myTab0_Content4" class="none"><a href="#">??特效</a></div></div></div></body></html> li的高度是28px，如何在不改变文字大小的前提下使li中的文字垂直居中？现在是靠上的。我给li设置了vertical-align:middle但是没效果。
多谢！
是你js里的问题~~~
好像是传参的问题，。
不是你说的li的问题哟~~
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：clear为什么能实现自动高度_html/css_WEB-ITnoseNext article：为什么div里明明放着很多东西，但是dreamweaver里这个div就是显示一条直线_html/css_WEB-ITnose