Maison >interface Web >tutoriel HTML >请问这段Tab选项卡的代码为什么不起作用？_html/css_WEB-ITnose
请问这段Tab选项卡的代码为什么不起作用？_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:37:51946parcourir
<!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的问题哟~~
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：clear为什么能实现自动高度_html/css_WEB-ITnoseArticle suivant：为什么div里明明放着很多东西，但是dreamweaver里这个div就是显示一条直线_html/css_WEB-ITnose