利用jquery實現一個簡單的tab切換

  • 今天的任務是,利用jQuery和原生JS來實現一個簡單的tab切換
    jqueryTab預覽
  • 思路
    1.首先確定HTML的結構
    2.確定基礎的CSS樣式
    3.JS的思路
    • 行為與樣式的分離,通過添加與移除active類來實現
    • 需要使用的事件與屬性操作方法,例如$(this) siblings() parents() addClass()
$('.tab').on('click',function(){
  $(this).addClass('active').siblings().removeClass('active')//給當前點擊元素添加active,移除兄弟元素的active
  $(this).parents('.box')
  .find('.panel')
  .eq($(this).index())
  .addClass('active')
  .siblings()
  .removeClass('active')//利用當前tab的index值尋找父元素下index值相同的panel并添加active,移除其他panel 的active
})
<div class="box">
  <div class="header clearfix">
    <div class="tab active">1</div>
    <div class="tab">2</div>
    <div class="tab">3</div>
    <div class="tab">4</div>
  </div>
  <div class="cont">
    <div class="panel active">p1</div>
    <div class="panel">p2</div>
    <div class="panel">p3</div>
    <div class="panel">p4</div>
  </div>
</div>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}
.box{
  margin-left:30px;
  margin-bottom:20px;
}

.tab{
  float:left;
  padding:5px 20px;
  background:skyblue;
  border-top:1px solid;
  border-left:1px solid;
}

.tab.active{
  background:white;
}
.tab:last-child{
  border-right: 1px solid ;
}
.cont{
  width:250px;
  height:200px;
  background:pink;
  border:1px solid;
}
.panel{
  display:none;
  background:pink;
}
.panel.active{
  display:block;
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • jQuery模塊 選擇器、DOM操作、事件、AJAX與動畫 匿名函數自執行 作用:解決命名空間與變量污染的問題 總...
    青青玉立閱讀 908評論 0 0
  • 通過jQuery,您可以選取(查詢,query)HTML元素,并對它們執行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 670評論 0 3
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,367評論 0 2
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,200評論 0 1
  • 概述:1)jQuery是一種框架,對于瀏覽器的兼容問題,95%不用再去考慮了。2)jQuery利用選擇器(借鑒了C...
    南山伐木閱讀 261評論 0 1