12*注意:1.需要給.notice-tit這個盒子設定相對定位，ul設定絕對定位並且left:-1px(如果不設定-1，ul這個盒子不會和.notice-tit這個盒子完全重疊，因為.notice-tit有個1px 的邊框);8.notice
15.notice-tit
20.notice-tit ul
2526
.notice-tit ul li
35.notice-tit ul a
39.notice-tit ul .select
46/*
.notice-tit ul li:hover
*/53
2.要給ul下面的li標籤設定左右padding 1px；當懸浮的時候出現左右1px的border，同時把當前懸浮的li左右padding設定為0,這樣懸浮的時候不會因為li加了2px的左右邊框而導致寬度增加;
然後是html結構：
11.獲取#notice-tit下面的所有li節點，獲取#notice-con下面的所有div節點。<
div
class
="notice"
>
2<
div
class
="notice-tit"
id="notice-tit"
>
3<
ul>
4<
li class
="select"
><
a href
="#"
>公告
a>
li>
5<
li><
a href
="#"
>規則
a>
li>
6<
li><
a href
="#"
>論壇
a>
li>
7<
li><
a href
="#"
>安全
a>
li>
8<
li><
a href
="#"
>公益
a>
li>9ul
>
10div
>
11<
div
class
="notice-con"
id="notice-con"
>
12<
div
style
="display: block"
>我是內容1
div>
13<
div
style
="display: none"
>我是內容2
div>
14<
div
style
="display: none"
>我是內容3
div>
15<
div
style
="display: none"
>我是內容4
div>
16<
div
style
="display: none"
>我是內容5
div>
17div
>
18div
>
2.遍歷#notice-tit下面的所有li節點並新增id和懸浮或者點選事件。
新增id的作用是懸浮在當前id上時對應的顯示.notice-con內的div。
初步效果實現了，如果需要點選效果把上面的onmouseover改為onclick。一般的tab標籤有個延時的效果，更有利於使用者體驗，下面來加個定時器。
下面來實現乙個標籤頁輪播的效果
思路:設定乙個索引index=0，和乙個定時器timer，在定時器setinterval()中隔2秒不停的去把索引加一，然後根據索引找到對應的元素節點進行操作,注意index不能無限的增加，最大值根據li的數量來決定。
1 window.onload=function()16
//新增樣式前應初始化全部樣式
17for(var i=0;i)
21//
給索引為index的節點去新增樣式
做這個標籤頁demo的過程中感覺單獨的功能做出來還是比較能理解，難理解的是把三個功能做在一起，重複做了幾遍，經常會卡殼，不知道下一步的思維邏輯。下一步終極+目標是**優化了，上面的**太多的重複，後續如何，下回分解。
tab 標籤頁實現
標籤頁功能是乙個比較常用的功能。雖然很多前端框架 外掛程式都帶有若干種標籤頁的功能實現，我依然覺得掌握其基本實現會更有利於我們對這個功能的理解，我們也可以更容易地根據實際情況進行修改。以下 示例是乙個比較常見的實現 春天的雨是柔和的，只見春雨在竹枝 竹葉上跳動著。那雨時而直線滑落，時而隨風飄灑，留下...
tab標籤頁切換
第一種 first second tab title li click function script 第二種 notice notice tit notice tit ul notice tit ul li notice tit ul a notice tit ul select 我是內容1 我是...
vue router實現tab標籤頁（單頁面）詳解
vue router 是 vue.js 官方的路由外掛程式，適合用於構建標籤頁應用。vue 的標籤頁應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來，vue router 會把各程式設計客棧個元件渲染到正確的地方。首先，vue中的內容非常簡單，建立標籤，並指定路徑，渲染路由匹配到...