JS使用面向對象技術實現的tab選項卡效果示例
更新時間：2017年02月28日 09:32:55 作者：小炒花生米
這篇文章主要介紹了JS使用面向對象技術實現的tab選項卡效果,結合具體實例形式分析了js面向對象技術與tab選項卡功能的具體實現技巧,需要的朋友可以參考下
本文實例講述了JS使用面向對象技術實現的tab選項卡效果。分享給大家供大家參考，具體如下：
運行效果圖如下：
代碼如下：
html:
<ul class="scrollUl">
<li id="m01" class="sd01" value="0"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新服排期</a></li>
<li id="m02" class="sd02" value="1"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >官方公告</a></li>
</ul>
<div id="c01" style="display: block;">
<ul>
<li class="ml10 mt10"><span class="fu"><a title="最三國“群雄逐鹿”震撼開啟 敬請期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三國“群雄逐鹿”震撼開啟 ...</a></span><span class="hui9">09-28</span></li>
<li class="ml10"><span class="fu"><a title="最三國“群雄逐鹿”震撼開啟 敬請期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三國“群雄逐鹿”震撼開啟 ...</a></span><span class="hui9">09-28</span></li>
<li class="ml10"><span class="fu"><a title="最三國“群雄逐鹿”震撼開啟 敬請期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三國“群雄逐鹿”震撼開啟 ...</a></span><span class="hui9">09-28</span></li>
<li class="ml10"><span class="fu"><a title="最三國“群雄逐鹿”震撼開啟 敬請期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三國“群雄逐鹿”震撼開啟 ...</a></span><span class="hui9">09-28</span></li>
<li class="ml10"><span class="fu"><a title="最三國“群雄逐鹿”震撼開啟 敬請期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三國“群雄逐鹿”震撼開啟 ...</a></span><span class="hui9">09-28</span></li>
<li class="ml10"><span class="fu"><a title="最三國“群雄逐鹿”震撼開啟 敬請期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三國“群雄逐鹿”震撼開啟 ...</a></span><span class="hui9">09-28</span></li>
</ul>
</div>
<div class="hidden" id="c02" style="display: none;">
<ul>
<li class="ml10 mt10"><span class="fu"><a title="《絕地戰(zhàn)爭》9月8日維護公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《絕地戰(zhàn)爭》9月8日維護公告</a></span><span class="hui9">09-28</span></li>
<li class="ml10"><span class="fu"><a title="《絕地戰(zhàn)爭》9月8日維護公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《絕地戰(zhàn)爭》9月8日維護公告</a></span><span class="hui9">09-28</span></li>
<li class="ml10"><span class="fu"><a title="《絕地戰(zhàn)爭》9月8日維護公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《絕地戰(zhàn)爭》9月8日維護公告</a></span><span class="hui9">09-28</span></li>
<li class="ml10"><span class="fu"><a title="《絕地戰(zhàn)爭》9月8日維護公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《絕地戰(zhàn)爭》9月8日維護公告</a></span><span class="hui9">09-28</span></li>
<li class="ml10"><span class="fu"><a title="《絕地戰(zhàn)爭》9月8日維護公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《絕地戰(zhàn)爭》9月8日維護公告</a></span><span class="hui9">09-28</span></li>
<li class="ml10"><span class="fu"><a title="《絕地戰(zhàn)爭》9月8日維護公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《絕地戰(zhàn)爭》9月8日維護公告</a></span><span class="hui9">09-28</span></li>
</ul>
</div>
js:
function scrollDoor(){
}
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass){
var _this = this;
if(menus.length != divs.length)
{
alert("菜單層數量和內容層數量不一樣!");
return false;
}
for(var i = 0 ; i < menus.length ; i++)
{
_this.$(menus[i]).value = i;
_this.$(menus[i]).onmouseover = function(){
//1.先關閉所有的導航和內容：
for(var j = 0 ; j < menus.length ; j++)
{
_this.$(menus[j]).className = closeClass;
_this.$(divs[j]).style.display = "none";
}
//2.打開當前的導航和內容：
//_this.$(menus[this.value]).className = openClass;
this.className = openClass;
_this.$(divs[this.value]).style.display = "block";
}
}
},
$ : function(oid){
if(typeof(oid) == "string")
return document.getElementById(oid);
return oid;
}
}
window.onload = function(){
var SDmodel = new scrollDoor();
SDmodel.sd(["m01","m02"],["c01","c02"],"sd01","sd02");
//SDmodel.sd(["m001","m002"],["c001","c002"],"sd01","sd02");
}
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
文件指紋是文件打包后輸出的文件名的后綴，通常用來做一些文件的版本管理，文中給大家提到了幾種文件指紋的設置用法，對Webpack文件指紋相關知識感興趣的朋友一起看看吧2022-02-02
這篇文章主要介紹了Js獲取單選框radio的幾種方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
兩個Javascript小tip資料，學習js的朋友可以參考下。2010-11-11
這篇文章主要介紹了BootStrap扔進Django里的方法，小編認為本文介紹的不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05
這篇文章主要介紹了使用js讓圖片組成動畫,這樣就可以用js做動畫了，大家參考使用吧2014-01-01
下面小編就為大家?guī)硪黄獪\談JS驗證表單文本域輸入空格的問題。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了Window.Open打開窗體和if嵌套代碼的相關資料,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細介紹了在JavaScript中如何校驗接口是否重復提交,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下2024-03-03
JavaScript 實現網頁打印處理...2007-04-04
這篇文章主要介紹了微信實現自動跳轉到用其他瀏覽器打開指定APP下載，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02