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> <!--整體構(gòu)局說明，用ul完成按鈕的橫向布局，用div完成三個內(nèi)容框架的垂直布局（類似于類表），然后將三個內(nèi)容框架全隱藏，通過下面的:first-child屬性只將第一個框架內(nèi)容顯示出來--> <div class="tab"> <div class="tab_menu"> <ul> <li class="on">實事</li> <li>政治</li> <li>體育</li> </ul> </div> <div class="tab_box"> <div>實事內(nèi)容</div> <div>政治內(nèi)容</div> <div>體育內(nèi)容</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)布局如下：
但是我們只需要一個框架里面的內(nèi)容進行顯示，所以在上面代碼的前提下添加一些小代碼輔助就可以了~~~~~~
進一步布局樣式代碼：
*{ 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; //將三個內(nèi)容框架全隱藏，通過下面的:first-child屬性只將第一個框架內(nèi)容顯示出來
}
.tab .tab_box > div:first-child{
display: block;
}
上面程序給.tab .tab_box > div樣式多添加了一個display：none，另外還通過:first-child屬性只將第一個框架內(nèi)容顯示出來~~~~~~這樣我們看到的布局就和我上面剛開始放的動畫效果圖保持一致了，布局也算是完成了~~~~~~
三、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(); //在按鈕選中時在下面顯示相應的內(nèi)容，同時隱藏不需要的框架內(nèi)容
});
});
如果大家還想深入學習，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總
希望本文所述對大家學習jquery程序設計有所幫助。
相關文章
jQuery移動端日期(datedropper)和時間(timedropper)選擇器附源碼下載
今天我給大家介紹一款非常有趣的日期和時間選擇器，它分為日期選擇器datedropper以及時間選擇器timedropper，他們倆尤其適合在移動端上應用。感興趣的小伙伴一起學習吧2016-04-04
JQuery 操作Javascript對象和數(shù)組的工具函數(shù)小結(jié)
JQuery提供了很多實用的工具函數(shù)。這些函數(shù)主要分為兩類，操作集合數(shù)組的函數(shù)和非集合數(shù)組函數(shù)。2010-01-01
jQuery訪問json文件中數(shù)據(jù)的方法示例
這篇文章主要介紹了jQuery訪問json文件中數(shù)據(jù)的方法,結(jié)合實力形式分析了jQuery事件響應及json文件的加載、讀取、遍歷等相關操作技巧,需要的朋友可以參考下2019-01-01
jquery插件，有幾種方法，有全局的，有對象方法的，一直覺得jquery插件迷迷糊糊，這陣子特地研究下，供那些像我一樣的初學者借鑒下。嘻嘻2012-08-08
jquery隊列queue與原生模仿其實現(xiàn)方法分享
jquery中的queue和dequeue是一組很有用的方法，他們對于一系列需要按次序運行的函數(shù)特別有用。特別animate動畫，ajax，以及timeout等需要一定時間的函數(shù)2014-03-03
這篇文章主要介紹了jquery提交form表單示例,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了jquery實現(xiàn)背景墻聚光燈效果示例,需要的朋友可以參考下2014-03-03
jQuery中調(diào)用WebService方法小結(jié)
以前在寫ajax請求時，總是喜歡使用jQuery+ashx的方式進行調(diào)用，今天采取jQuery+WebService的方法來做ajax請求，發(fā)現(xiàn)這種方式比使用ashx的方式要更方便。2011-03-03
基于jquery的關于動態(tài)創(chuàng)建DOM元素的問題
在我們實際的項目之中，相信有很多的朋友直接使用了以下的格式創(chuàng)建DOM元素。2010-12-12
本篇文章是對jQuery中的折疊面板進行了詳細的分析介紹，需要的朋友參考下2013-06-06