ホームページ > 記事 > ウェブフロントエンド > このタブコードが機能しないのはなぜですか? _html/css_WEB-ITnose
このタブコードが機能しないのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:37:51916ブラウズ
<!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 に問題があります~~~
パラメータの受け渡しの問題のようです。
あなたが言ったように、それは李さんの問題ではありません~~
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。