學(xué)習(xí)javascript面向?qū)ο?實(shí)例講解面向?qū)ο筮x項(xiàng)卡
本文實(shí)例講解了最簡(jiǎn)單的面向?qū)ο筮x項(xiàng)卡實(shí)現(xiàn)方法,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
1、功能說(shuō)明
點(diǎn)擊三個(gè)按鈕分別顯示對(duì)應(yīng)的選項(xiàng)卡
2、html代碼說(shuō)明
<div class="box" id="box"> <ul class="list"> <li class="in_active">第一張選項(xiàng)卡</li> <li class="in">第二張選項(xiàng)卡</li> <li class="in">第三張選項(xiàng)卡</li> </ul> <nav class="conList"> <a class="con_active" href="javascript:;">第一個(gè)控制按鈕</a> <a class="con" href="javascript:;">第二個(gè)控制按鈕</a> <a class="con" href="javascript:;">第三個(gè)控制按鈕</a> </nav> </div>
3、css重點(diǎn)代碼說(shuō)明
/*in為選項(xiàng)卡普通狀態(tài),默認(rèn)不顯示*/ .in,.in_active{ display: none; width: 600px; height: 100px; background: orange; font-size: 50px; line-height: 100px; text-align: center; } /*in_active為選項(xiàng)卡選中狀態(tài),選中后顯示*/ .in_active{ display: block; } /*con為按鈕普通狀態(tài),默認(rèn)文字顏色為黑色*/ .con,.con_active{ color: black; background-color: orange; } /*con_active為按鈕選中狀態(tài),選中后文字顏色為白色*/ .con_active{ color: white; }
4、js代碼說(shuō)明
function Tab(obj){ /*元素獲取*/ //獲取選項(xiàng)卡展示部分 this.oList = obj.getElementsByTagName('ul')[0]; this.aIn = this.oList.getElementsByTagName('li'); //獲取選項(xiàng)卡控制部分 this.oConList = obj.getElementsByTagName('nav')[0]; this.aCon = this.oConList.getElementsByTagName('a'); /*變量設(shè)置*/ //選項(xiàng)卡張數(shù) this.count = this.aIn.length; //當(dāng)前第幾張 this.cur = 0; var _this = this; for(var i = 0; i < this.count; i++){ //設(shè)置索引 this.aCon[i].index = i; //給按鈕添加事件 this.aCon[i].onclick = function(){ _this.cur = this.index; _this.switch(); } } } Tab.prototype.switch = function(){ //去掉所有 for(var i = 0; i < this.count; i++){ this.aIn[i].className = 'in'; this.aCon[i].className = 'con'; } //顯示當(dāng)前 this.aIn[this.cur].className = 'in_active'; this.aCon[this.cur].className = 'con_active'; } //獲取選項(xiàng)卡元素 var oBox = document.getElementById('box'); //構(gòu)造選項(xiàng)卡對(duì)象 var tab1 = new Tab(oBox);
希望本文所述對(duì)大家學(xué)習(xí)javascript面向?qū)ο笥兴鶐椭?/p>
- js基于面向?qū)ο髮?shí)現(xiàn)網(wǎng)頁(yè)TAB選項(xiàng)卡菜單效果代碼
- js簡(jiǎn)單實(shí)現(xiàn)豎向tab選項(xiàng)卡的方法
- JS+CSS實(shí)現(xiàn)的經(jīng)典tab選項(xiàng)卡效果代碼
- 原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
- 原生javascript實(shí)現(xiàn)Tab選項(xiàng)卡切換功能
- JS實(shí)現(xiàn)同一個(gè)網(wǎng)頁(yè)布局滑動(dòng)門和TAB選項(xiàng)卡實(shí)例
- js實(shí)現(xiàn)類似菜單風(fēng)格的TAB選項(xiàng)卡效果代碼
- jquery插件tytabs.jquery.min.js實(shí)現(xiàn)漸變TAB選項(xiàng)卡效果
- JS實(shí)現(xiàn)不規(guī)則TAB選項(xiàng)卡效果代碼
- JS基于面向?qū)ο髮?shí)現(xiàn)的多個(gè)倒計(jì)時(shí)器功能示例
- JS基于面向?qū)ο髮?shí)現(xiàn)的選項(xiàng)卡效果示例
- JS使用面向?qū)ο蠹夹g(shù)實(shí)現(xiàn)的tab選項(xiàng)卡效果示例
相關(guān)文章
經(jīng)典的間隔時(shí)間滾動(dòng)新聞(圖片),可控制滾動(dòng)
經(jīng)典的間隔時(shí)間滾動(dòng)新聞(圖片),可控制滾動(dòng) 其實(shí)這個(gè)也挺多網(wǎng)站用到的,簡(jiǎn)單又實(shí)用。(2010-05-05JavaScript正則表達(dá)式替換字符串中圖片地址(img src)的方法
這篇文章主要介紹了JavaScript正則表達(dá)式替換字符串中圖片地址(img src)的方法,結(jié)合實(shí)例形式分析了JS正則替換的常用技巧與注意事項(xiàng),需要的朋友可以參考下2017-01-01通用javascript腳本函數(shù)庫(kù) 方便開(kāi)發(fā)
javascript 在 WEB 編程中能起到很大的作用,將一些常用的功能寫成javascript類庫(kù)。2009-10-10用javascript替換URL中的參數(shù)值示例代碼
本篇文章主要是對(duì)用javascript替換URL中的參數(shù)值示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01js實(shí)現(xiàn)圖片在未加載完成前顯示加載中字樣
首先判斷瀏覽器再判斷圖片是否加載完成,如果還未加載就顯示“加載中...”,思路及代碼如下2014-09-09不錯(cuò)的用resizeTo和moveTo兩個(gè)函數(shù)實(shí)現(xiàn)窗口的“打乒乓球”效果
不錯(cuò)的用resizeTo和moveTo兩個(gè)函數(shù)實(shí)現(xiàn)窗口的“打乒乓球”效果...2007-08-08JavaScript數(shù)學(xué)對(duì)象之?dāng)?shù)字進(jìn)制轉(zhuǎn)換
這篇文章主要為大家講解了JavaScript數(shù)學(xué)對(duì)象——數(shù)字進(jìn)制轉(zhuǎn)換的實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05