如我們上述圖檔展示的，這個頁面當中包含兩個部分，上下各有一個标簽頁，我們經常會在web應用當中，看到标簽頁效果，主要的作用是在可視區内有限的區域内，在某一個區域内展現一些内容給使用者，上面一個标簽頁，我們稱之為滑動門技術，滑鼠移動懂某一個标簽的時候，内容會跟着變動，好了，對于這個小例子的實作效果小編就先介紹到這裡，接着，我們開始來編寫我們的代碼，首先，我們來看html的代碼該如何編寫nie，代碼如下所示：
我們來看一下運作的效果，會有怎樣的驚喜等着我們？
可以發現，經過編寫html代碼後，我們的運作效果如上圖所示，但是這個效果和我們最終需要實作的效果，相差了十萬八千裡，但是html的工作已經完成了，因為頁面上隻有這些内容，至于如何展現一個标簽頁的效果，是css的工作，接着，我們來編寫css的代碼，如下所示:
我們來分析一下上面的代碼，我們發現一組标簽用一個ul來管理，每一個标簽是ul中的一個li，标簽下面的内容就是用div來管理。編寫了css之後的效果會是什麼樣子呢？我們來看一下運作效果：
我們來看一下運作效果，如下圖所示：
至此，我們的第一個标簽頁的效果就已經編寫完成了，接着，我們來編寫第二個标簽頁的效果，在此，小編溫馨提醒一下，第二個标簽頁的代碼，小編是在第一個标簽頁效果的基礎上添加的，好的，來看看我們第二個标簽頁的效果是如何實作的nie，首先，我們來看html的代碼，如下所示：
接着，我們來編寫CSS的代碼，如下所示：
最後，編寫js的代碼，具體代碼如下所示；
最後，我們來看一下運作效果，如下圖所示：