溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
tab選項卡在網上是很常見的一種效果 網站當中隨處可見 特別是大型網站到處都是，但是寫tab這種效果 用的方式可能不一樣 有的是YUI寫的 用的是用KISSY寫的 有的是用原審js寫的 也有的是以Jquery框架寫的 但是我這里是用Jquery來封裝tab選項卡的 在js中我用了Jquery中的children()這個方法 獲取父類中直接子元素，記住一定是直接子元素 假入說要獲取子元素的div當中的a標簽 比如這樣獲取 $("父類").children("div a");想獲取a標簽是獲取不到的 只能獲取到div標簽！！我以前做頁面時候就碰到過這種情況！OK 其實用Jquery來封裝tab選項卡是非常簡單的一件事情！只要幾行代碼 就ok了！下面是我的HTML結構及CSS
- <style type="text/css">
- ul,li,div{ margin:0; padding:0;}
- ul,li{ list-style:none;}
- .tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}
- .tab{ background:#F93; overflow:hidden; width:450px;}
- .tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}
- .tab li.on{background:#F60;}
- .tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }
- .tabContent .hide{ display:none;}
- </style>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
- </head>
- <body>
- <div class="tabWrap">
- <ul class="tab">
- <li>選項卡1</li>
- <li>選項卡2</li>
- <li>選項卡3</li>
- </ul>
- <div class="tabContent">
- <div class="p-content">1111</div>
- <div class="p-content hide">222</div>
- <div class="p-content hide">3333</div>
- </div>
- </div>
- <br/>
- <br/>
- <div class="tabWrap">
- <ul class="tab">
- <li>選項卡1</li>
- <li>選項卡2</li>
- <li>選項卡3</li>
- </ul>
- <div class="tabContent">
- <div class="p-content">1111</div>
- <div class="p-content hide">222</div>
- <div class="p-content hide">3333</div>
- </div>
- </div>
我這邊HTML是用了兩個一樣的結構及樣式 是為了測試js在一個頁面上多次調用是否成功！JS代碼如下：
- <script type="text/javascript">
- $(function(){
- function tabs(tabMenu,on,tabContent){
- $(tabContent).each(function(){
- $(this).children().eq(0).show();
- });
- $(tabMenu).each(function(){
- $(this).children().eq(0).addClass(on);
- });
- $(tabMenu).children().hover(function(){
- $(this).addClass(on).siblings().removeClass(on);
- var index = $(tabMenu).children().index(this);
- $(tabContent).children().eq(index).show().siblings().hide();
- });
- }
- tabs(".tab","on",".tabContent");
- })
- </script>
引用上面的js就可以了！為了更清晰 待會把源文件放在附件里面 隨時可以下載看看！下面說說寫這個頁面的js一點思路！
一 function tabs(tabMenu,on,tabContent){} 用這個函數來封裝js 調用的方式是tabs(".tab","on",".tabContent"),其中tabMenu是指li外層ul on是指當鼠標移上去li 希望他有個背景 tabContent 是指content的外層！
二 接著用each來遍歷 找到第一個子元素li增加一個類on 第一個content讓她們顯示！接著當鼠標移到任何一個li時候 讓當前的li增加一個類on 同輩元素刪除類on 然后索引當前的li 看是第幾個 最后找出content 如果他的索引值和li的索引值相同的話 顯示內容 同輩元素隱藏掉！思路就這么簡單！！！！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
