jQuery實現(xiàn)選項卡切換效果簡單演示

更新時間：2015年12月09日 20:15:29 作者：Sunshine_lily

這篇文章為大家分享了一款jQuery實現(xiàn)選項卡切換簡單演示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例講述了jQuery實現(xiàn)選項卡切換效果簡單演示代碼。分享給大家供大家參考。具體如下：

運行效果圖如下

一、主體程序

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>選項卡</title>
 <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
 <!--整體構局說明，用ul完成按鈕的橫向布局，用div完成三個內容框架的垂直布局（類似于類表），然后將三個內容框架全隱藏，通過下面的:first-child屬性只將第一個框架內容顯示出來-->
 <div class="tab">
 <div class="tab_menu">
 <ul>
 <li class="on">實事</li>
 <li>政治</li>
 <li>體育</li>
 </ul>
 </div>
 <div class="tab_box">
 <div>實事內容</div>
 <div>政治內容</div>
 <div>體育內容</div>
 </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
 <script type="text/javascript" src="js/layout.js"></script>
 </body>
</html>

二、CSS樣式
初步布局代碼：

*{ margin:0; padding:0}
ul{
 list-style: none;
}
.tab{
 width: 300px;
 margin: 0 auto;
}
.tab .tab_menu{
 border: 1px solid #000000;
 height: 30px;
 width: 300px; 
}
.tab .tab_menu ul li{
 float: left;
 width: 99px;
 text-align: center;
 line-height: 30px;
 border-right: 1px #333333 solid;
}
.tab .tab_menu ul li:last-child{
 border-right:none;
 width: 100px;
}
.tab .tab_menu ul li.on{
 background: #999;
}
.tab .tab_box > div{
 width: 300px;
 height: 200px;
 border: #333333 solid;
 border-width: 0 1px 1px 1px;
}

上面的代碼實現(xiàn)布局如下：

但是我們只需要一個框架里面的內容進行顯示，所以在上面代碼的前提下添加一些小代碼輔助就可以了~~~~~~

進一步布局樣式代碼：

*{ margin:0; padding:0}
ul{
 list-style: none;
}
.tab{
 width: 300px;
 margin: 0 auto;
}
.tab .tab_menu{
 border: 1px solid #000000;
 height: 30px;
 width: 300px; 
}
.tab .tab_menu ul li{
 float: left;
 width: 99px;
 text-align: center;
 line-height: 30px;
 border-right: 1px #333333 solid;
}
.tab .tab_menu ul li:last-child{
 border-right:none;
 width: 100px;
}
.tab .tab_menu ul li.on{
 background: #999;
}
.tab .tab_box > div{
 width: 300px;
 height: 200px;
 border: #333333 solid;
 border-width: 0 1px 1px 1px;
 display: none; //將三個內容框架全隱藏，通過下面的:first-child屬性只將第一個框架內容顯示出來
}
.tab .tab_box > div:first-child{
 display: block;
}

上面程序給.tab .tab_box > div樣式多添加了一個display：none，另外還通過:first-child屬性只將第一個框架內容顯示出來~~~~~~這樣我們看到的布局就和我上面剛開始放的動畫效果圖保持一致了，布局也算是完成了~~~~~~

三、Jquery代碼：

$(function(){
 $(".tab_menu ul li").click(function(){
 $(this).addClass("on").siblings().removeClass("on"); //切換選中的按鈕高亮狀態(tài)
 var index=$(this).index(); //獲取被按下按鈕的索引值，需要注意index是從0開始的
 $(".tab_box > div").eq(index).show().siblings().hide(); //在按鈕選中時在下面顯示相應的內容，同時隱藏不需要的框架內容
 });
});

如果大家還想深入學習，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總

希望本文所述對大家學習jquery程序設計有所幫助。

您可能感興趣的文章: