不一樣的技術(shù)冗栗,一樣的Tab頁(yè)

不一樣的技術(shù)见妒,一樣的Tab頁(yè)

前言:
都知道tab頁(yè),無(wú)非就是點(diǎn)擊頁(yè)面標(biāo)簽可以有選中對(duì)應(yīng)的頁(yè)面郊供。
但是簡(jiǎn)簡(jiǎn)單單的功能或許會(huì)給我們帶來(lái)更多的思考峡碉。當(dāng)然可以使用不同的技術(shù)實(shí)現(xiàn),下面就展示三種技術(shù)手段實(shí)現(xiàn)tab頁(yè)面
技術(shù)是不一樣的驮审,但是思路是一樣鲫寄,正如,條條大路通羅馬疯淫,不管那條路地来,最后都要通往羅馬的。
目前整體的思路是寫(xiě)出所有顯示的頁(yè)面熙掺,再根據(jù)標(biāo)簽點(diǎn)擊顯示對(duì)應(yīng)的標(biāo)簽

使用原生JavaScript實(shí)現(xiàn)tab的轉(zhuǎn)換

HTML

<div class="main">
    <div class="main">
        <div class="nav" id="nav-list">
            <ul>
                <li class="active">菜單一 </li>
                <li>菜單二 </li>
                <li>菜單三 </li>
                <li>菜單四 </li>
            </ul>
        </div>
<div id="con">
    <div class="con" style="display:block">
        <ul>
            <li>11111111111111111111</li>
            <li>11111111111111111111</li>
            <li>11111111111111111111</li>
            <li>11111111111111111111</li>
            <li>11111111111111111111</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>222222222222222222222</li>
            <li>222222222222222222222</li>
            <li>222222222222222222222</li>
            <li>222222222222222222222</li>
            <li>222222222222222222222</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>333333333333333333</li>
            <li>333333333333333333</li>
            <li>333333333333333333</li>
            <li>333333333333333333</li>
            <li>333333333333333333</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>44444444444444444444</li>
            <li>44444444444444444444</li>
            <li>222222222222222222222</li>
            <li>222222222222222222222</li>
            <li>222222222222222222222</li>
        </ul>
    </div>
    </div>
</div>

</div>

JS

window.onload=function(){
//獲取nav標(biāo)簽數(shù)組
var nav=document.getElementById("nav-list").getElementsByTagName("li");  
//獲取顯示頁(yè)標(biāo)簽數(shù)組
var con=document.getElementById("con").getElementsByTagName("div");
//給每一個(gè)nav標(biāo)簽賦初始值未斑,點(diǎn)擊添加事件,
      for(i=0;i<nav.length;i++){
      //給每一個(gè)標(biāo)簽添加一個(gè)屬性index币绩,屬性值是順序名
          nav[i].index = i;
           console.log(nav[i].index);
          nav[i].onclick=function(){
          //把所有的標(biāo)簽的style都設(shè)置為none蜡秽。class為空
              for(var n = 0; n < con.length; n++) {
                  con[n].style.display = "none";
                  nav[n].className = "";
              }
              console.log(this.index);
           console.log(this);
        //給點(diǎn)擊的那個(gè)標(biāo)簽的style添加為block,class為active缆镣;this代表的是點(diǎn)擊的那個(gè)nav[i]
              con[this.index].style.display = "block"
              nav[this.index].className = "active";
              }
          
          }
      }

CSS

.icon .nav{ height:30px;}
.nav li{ display:inline-block; width:100px; height:30px;line-height:30px; float:left; cursor:pointer; text-align:center;background:#ddd;}
.nav li.active{color:#fff;background:#f60}
.con{ display:none; padding-top:10px;}

思路:

  1. 總體的想法就是芽突,不點(diǎn)擊時(shí)默認(rèn)的是所有display設(shè)置為none,在需要顯示的頁(yè)面上董瞻,手動(dòng)添加為block寞蚌,這樣就為默認(rèn)樣式了。
  2. 當(dāng)點(diǎn)擊標(biāo)簽時(shí),獲取到標(biāo)簽值挟秤,找到相應(yīng)的標(biāo)簽頁(yè)壹哺,添加block,添加class

js實(shí)現(xiàn)的原理也是其他技術(shù)實(shí)現(xiàn)的原理

使用angularJS 實(shí)現(xiàn)tab標(biāo)簽頁(yè)

前言:
angular 的精髓是在雙向綁定煞聪,那也就可以使用雙向綁定的特點(diǎn)來(lái)實(shí)現(xiàn)tab標(biāo)簽斗躏。

HTML

<div class= "tab-table-css" ng-controller="TabTableController as tab">
  <!--標(biāo)簽頁(yè)-->
    <nav class="nav-list">
        <ul>
            <span class="set-up">設(shè)置</span>
            <li ng-class="{active: tab.isSet(1)}" ng-click="tab.setContent(1)" ><span>節(jié)點(diǎn)信息</span></li>
            <li ng-class="{active: tab.isSet(2)}" ng-click="tab.setContent(2)"><span>鏈接</span></li>
            <li ng-class="{active: tab.isSet(3)}" ng-click="tab.setContent(3)"><span>背景信息</span></li>
            <li ng-class="{active: tab.isSet(4)}" ng-click="tab.setContent(4)"><span>背景圖片</span></li>
        </ul>
    </nav>

    <!-- 內(nèi)容頁(yè) -->
    <div class="tab-content">
      <section ng-show="tab.isSet(1)">
        <p>1</p>
      </section>
      <section ng-show="tab.isSet(2)">
        <p>222</p>
      </section>
      <section ng-show="tab.isSet(3)">
        <p>333</p>
      </section>
      <section ng-show="tab.isSet(4)">
        <p>4444</p>
      </section>
    </div>
</div>


標(biāo)簽上設(shè)置選中后的class 如果為true就顯示為選中狀態(tài)逝慧,其次是添加一個(gè)函數(shù)昔脯,點(diǎn)擊后顯示對(duì)應(yīng)的標(biāo)簽頁(yè),
標(biāo)簽頁(yè)笛臣,使用的是ng-show顯示云稚。

angularJS

var self = this;

            //起始選中頁(yè)
            self.content = 1;
            //設(shè)置選中的tab
            self.setContent = function(tab){
                self.content = tab;
                self.active = true;

            };
            //顯示對(duì)應(yīng)的tab 返回的是布爾值
          
            self.isSet = function(tab){
                return self.content == tab;
            };

果然還是angular最為簡(jiǎn)單,只不過(guò)不易維護(hù)

思路:為每個(gè)標(biāo)簽頁(yè)設(shè)置一個(gè)函數(shù)沈堡,函數(shù)的參數(shù)已經(jīng)給出静陈,根據(jù)參數(shù),來(lái)判斷標(biāo)簽頁(yè)的顯示和標(biāo)簽的顯示诞丽。較為合理鲸拥。代碼簡(jiǎn)單粗暴。

總結(jié): 其實(shí)tab頁(yè)的技術(shù)雖說(shuō)不一樣僧免,但是整體的思路都是一樣的刑赶,首先是默認(rèn)的樣式,點(diǎn)擊后顯示對(duì)應(yīng)的頁(yè)面和選中樣式懂衩,去掉未選中的樣式撞叨。也可以使用移除元素的做法,也可以試試的

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末浊洞,一起剝皮案震驚了整個(gè)濱河市牵敷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌法希,老刑警劉巖枷餐,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異苫亦,居然都是意外死亡毛肋,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)著觉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)村生,“玉大人,你說(shuō)我怎么就攤上這事饼丘〕锰遥” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)卫病。 經(jīng)常有香客問(wèn)我油啤,道長(zhǎng),這世上最難降的妖魔是什么蟀苛? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任益咬,我火速辦了婚禮,結(jié)果婚禮上帜平,老公的妹妹穿的比我還像新娘幽告。我一直安慰自己,他們只是感情好裆甩,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布冗锁。 她就那樣靜靜地躺著,像睡著了一般嗤栓。 火紅的嫁衣襯著肌膚如雪冻河。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,785評(píng)論 1 314
  • 那天茉帅,我揣著相機(jī)與錄音叨叙,去河邊找鬼。 笑死堪澎,一個(gè)胖子當(dāng)著我的面吹牛擂错,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播全封,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼马昙,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了刹悴?” 一聲冷哼從身側(cè)響起行楞,我...
    開(kāi)封第一講書(shū)人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎土匀,沒(méi)想到半個(gè)月后子房,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡就轧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年证杭,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片妒御。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡解愤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出乎莉,到底是詐尸還是另有隱情送讲,我是刑警寧澤奸笤,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站哼鬓,受9級(jí)特大地震影響监右,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜异希,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一健盒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧称簿,春花似錦扣癣、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)善茎。三九已至券册,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間垂涯,已是汗流浹背烁焙。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留耕赘,地道東北人骄蝇。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像操骡,于是被迫代替她去往敵國(guó)和親九火。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容