【自我作业】JS+CSS tab选项卡

技术2025-01-12 12

调了一个上午才发现问题：

this.className = " tabOn";

我不小心写错漏了一个空格变成

this.className = "tabOn";

导致js失效了。

粗心是罪恶根源，而没有仔细分析那个空格的作用更是失败。

更恶劣的是，这个选项卡并不是我独立完成的，我在做之前分析了一段源码才动手，可是过程中又要不断的翻开那段源代码看才能写下去，这就证明我分析的还不够，对那段源码理解得不够透彻……

仍需努力

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> /*初始化*/ div,ul,li,dl,dt,dd,span,a,h4 { margin:0; padding:0; color:#000; } a { text-decoration:none; } img { border:none; width:80px; height:100px; } ul,li { list-style:none; } /*选项卡整体外观CSS*/ #tabPageDiv { width:400px; height:160px; overflow:hidden; } #tabPageUl { height:100%; position:relative; background:#09c; } /*100% ???????????????*/ .tabOption { width:25%; float:left; text-align:center; } .tabOption h4 { font-size:13px; line-height:22px; } .tabOption h4 a { color:#039; display:block; background:url(http://www.webjx.com/files/090217/1_222040.png) no-repeat; padding-left:5px; } .tabOption h4 a span { display:block; background:url(http://www.webjx.com/files/090217/1_222040.png) no-repeat top right; padding-right:5px; } .tabOption h4 a:hover, .tabOn h4 a { background-position:0 -50px; } .tabOption h4 a:hover span, .tabOn h4 a span { background-position:right -50px; } .tabBox { width:390px; height:130px; border:1px solid #069; text-align:left; position:absolute; background:#fff; top:22px; left:0; margin:4px; display:none; overflow:hidden; font-size:13px; } .tabOption:hover .tabBox, .tabOn .tabBox{ display:block; } /*选项卡内部CSS*/ .tabContentText { line-height:24px; margin:5px; } .tabContentText dt, .tabContentText dd { float:left; border-bottom:1px dotted #9cf; } .tabContentText dt { font-size:14px; clear:left; width:60%; white-space:nowrap; overflow:hidden; } .tabContentText dt a { color:#039; display:block; margin-left:5px; padding-left:12px; background:url(http://www.webjx.com/files/090217/1_222128.png) no-repeat 5px 11px; } .tabContentText dt a:hover { color:#f90; background-position:5px -19px; } .tabContentText dd { width:20%; } .tabContentText dd a{ color:#069; } .tabContentText dd a:hover{ color:#f90; } .tabContentImg li{ float:left; width:25%; padding-top:15px; text-align:center; } </style> <mce:script language="JavaScript" type="text/javascript"></mce:script> </head> <body> <div id="tabPageDiv"> <ul id="tabPageUl"> <li class="tabOption tabOn"> <h4><a href="#" mce_href="#"><span>optionOne</span></a></h4> <div class="tabBox"> <dl class="tabContentText"> <dt title="title"><a href="#" mce_href="#">titleTitleTitleTitle</a></dt> <dd class="author"><a href="#" mce_href="#">author</a></dd> <dd class="data">1989-12-18</dd> <dt title="title"><a href="#" mce_href="#">titleTitleTitleTitle</a></dt> <dd class="author"><a href="#" mce_href="#">author</a></dd> <dd class="data">1989-12-18</dd> <dt title="title"><a href="#" mce_href="#">titleTitleTitleTitle</a></dt> <dd class="author"><a href="#" mce_href="#">author</a></dd> <dd class="data">1989-12-18</dd> <dt title="title"><a href="#" mce_href="#">titleTitleTitleTitle</a></dt> <dd class="author"><a href="#" mce_href="#">author</a></dd> <dd class="data">1989-12-18</dd> <dt title="title"><a href="#" mce_href="#">titleTitleTitleTitle</a></dt> <dd class="author"><a href="#" mce_href="#">author</a></dd> <dd class="data">1989-12-18</dd> </dl> </div> </li> <li class="tabOption"> <h4><a href="#" mce_href="#"><span>optionTwo</span></a></h4> <div class="tabBox"> <ul class="tabContentImg"> <li><img src="http://www.webjx.com/files/090217/1_221542.jpg" mce_src="http://www.webjx.com/files/090217/1_221542.jpg" /></li> <li><img src="http://www.webjx.com/files/090217/1_221542.jpg" mce_src="http://www.webjx.com/files/090217/1_221542.jpg" /></li> <li><img src="http://www.webjx.com/files/090217/1_221542.jpg" mce_src="http://www.webjx.com/files/090217/1_221542.jpg" /></li> <li><img src="http://www.webjx.com/files/090217/1_221542.jpg" mce_src="http://www.webjx.com/files/090217/1_221542.jpg" /></li> </ul> </div> </li> <li class="tabOption"> <h4><a href="#" mce_href="#"><span>optionThree</span></a></h4> <div class="tabBox"> <dl class="tabContentText"> <dt title="title"><a href="#" mce_href="#">titleTitleTitleTitle3</a></dt> <dd class="author"><a href="#" mce_href="#">author</a></dd> <dd class="data">1989-12-18</dd> <dt title="title"><a href="#" mce_href="#">titleTitleTitleTitle3</a></dt> <dd class="author"><a href="#" mce_href="#">author</a></dd> <dd class="data">1989-12-18</dd> <dt title="title"><a href="#" mce_href="#">titleTitleTitleTitle3</a></dt> <dd class="author"><a href="#" mce_href="#">author</a></dd> <dd class="data">1989-12-18</dd> <dt title="title"><a href="#" mce_href="#">titleTitleTitleTitle3</a></dt> <dd class="author"><a href="#" mce_href="#">author</a></dd> <dd class="data">1989-12-18</dd> <dt title="title"><a href="#" mce_href="#">titleTitleTitleTitle3</a></dt> <dd class="author"><a href="#" mce_href="#">author</a></dd> <dd class="data">1989-12-18</dd> </dl> </div> </li> <li class="tabOption"> <h4><a href="#" mce_href="#"><span>optionFour</span></a></h4> <div class="tabBox"> <ul class="tabContentImg"> <li><a href="#" mce_href="#"><img src="http://www.webjx.com/files/090217/1_221548.jpg" mce_src="http://www.webjx.com/files/090217/1_221548.jpg" /></a></li> <li><a href="#" mce_href="#"><img src="http://www.webjx.com/files/090217/1_221548.jpg" mce_src="http://www.webjx.com/files/090217/1_221548.jpg" /></a></li> <li><a href="#" mce_href="#"><img src="http://www.webjx.com/files/090217/1_221548.jpg" mce_src="http://www.webjx.com/files/090217/1_221548.jpg" /></a></li> <li><a href="#" mce_href="#"><img src="http://www.webjx.com/files/090217/1_221548.jpg" mce_src="http://www.webjx.com/files/090217/1_221548.jpg" /></a></li> </ul> </div> </li> </ul>  </div>  </body> </html>

最新回复(0)