ホームページ > 記事 > ウェブフロントエンド > js/jQueryはタブ関数を実装するだけです
最初の方法は、次のようにネイティブ js コードを使用することです:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单选项卡</title> <style type="text/css"> body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:450px;margin:10px auto;} #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;} #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;} #tab li.current{color:#000;background:#ccc;} #content{border:1px solid #000;border-top-width:0;} #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;} </style> <script type="text/javascript"> window.onload = function () { var oLi = document.getElementById("tab").getElementsByTagName("li"); var oUl = document.getElementById("content").getElementsByTagName("ul"); for(var i = 0; i < oLi.length; i++) { oLi[i].index = i; oLi[i].onmouseover = function (){ for(var n = 0;n < oLi.length;n++) { oLi[n].className = ""; this.className = "current"; } for(var n = 0;n <oUl.length;n++) { oUl[n].style.display = "none"; oUl[this.index].style.display="block"; } } } } </script> </head> <body> <div id="outer"> <ul id="tab"> <li class="current">科技</li> <li>旅游</li> <li>娱乐</li> </ul> <div id="content"> <ul style="display:block;"> <li>宏碁R7双转轴变形本评测:触摸板设计过于另类(图)</li> <li> 超薄加防水 索尼Xperia Tablet Z平板电脑评测</li> <li>诺基亚Lumia 925评测 最好的WP8智能手机</li> <li> 联想IdeaPad S405评测 性能主流续航待提升</li> <li>小辣椒M2智能手机评测: 再不换壳我们就该老了</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> <li>网页换肤效果</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> </ul> <ul> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> </ul> <ul> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> </ul> </div> </div> </body> </html>
2 番目の方法は jQuery を使用することで、コードは最初の方法よりも簡単です
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单选项卡</title> <style type="text/css"> body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:450px;margin:10px auto;} #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;} #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;} #tab li.current{color:#000;background:#ccc;} #content{border:1px solid #000;border-top-width:0;} #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;} </style> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ var timeid; $("#tab").find("li").each(function(index){ var sLi=$(this); sLi.mouseenter(function(){ timeid= setTimeout(function(){ sLi.addClass("current").siblings().removeClass("current"); sLi.parent().next().find("ul:eq(" + index +")").show().siblings().hide() ; },300); }).mouseleave(function(){ clearTimeout(timeid); }) }) }) </script> </head> <body> <div id="outer"> <ul id="tab"> <li class="current">科技</li> <li>旅游</li> <li>娱乐</li> </ul> <div id="content"> <ul style="display:block;"> <li>宏碁R7双转轴变形本评测:触摸板设计过于另类(图)</li> <li> 超薄加防水 索尼Xperia Tablet Z平板电脑评测</li> <li>诺基亚Lumia 925评测 最好的WP8智能手机</li> <li> 联想IdeaPad S405评测 性能主流续航待提升</li> <li>小辣椒M2智能手机评测: 再不换壳我们就该老了</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> <li>网页换肤效果</li> <li>联想K900内部构造 看国产神器多少国产货(组图)</li> </ul> <ul> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> <li>爱上西雅图,美国全景游精选推荐 </li> </ul> <ul> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> <li>李安宣布辞拍美剧《暴君》:需要休息</li> </ul> </div> </div> </body> </html>
ネイティブ JS を使用する最初の方法は、他の人のメソッドから学ぶことです, 2 番目の方法は、1 番目の方法に基づいて記述されています。 。 。
タブ関数を実装するだけの js/jQuery に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。