 
<div class="tab"> 
<div class="tab_menu"> 
<ul> 
<li class="selected">個(gè)人信息</li> 
<li class="selected">我的照片</li> 
<li class="selected">我的博客</li> 
<div class="clear"></div> 
</ul> 
</div> 
<div class="tab_box"> 
<div class="box">我的QQ:1511109272</div> 
<div class="box hide">hi </div> 
<div class="box hide"> hello <br> </div> 
</div> 
</div> 

接著可以jquery代碼設(shè)置

復(fù)制代碼代碼如下:

 
$(function() { 
//網(wǎng)頁選項(xiàng)卡的切換 
var $menu_li = $("div.tab_menu ul li"); 
$menu_li.click(function(){ 
$(this).addClass("selected") //當(dāng)前<li>高亮 
.siblings().removeClass("selected"); //去掉其它同輩<li>的高亮 
var index = $menu_li.index( $(this) ); //找到<li>子節(jié)點(diǎn)的索引 
$("div.tab_box > div") //索引為N的DIV顯示出來 
.eq(index).show() 
.siblings().hide(); 
}) 
}) 

然后CCS樣式可以設(shè)置一下

復(fù)制代碼代碼如下:

 
.clear{ clear:both; height:0px; overflow:hidden;} 
.tab{ width:400px; font-size:12px;} 
.tab_menu ul{ padding:0px;margin:0px;} 
.tab_menu li{ list-style:none; display:block; float:left; 
background:#C2CEFE; height:22px; line-height:22px; 
padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid; 
} 
.box{ width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; } 
.tab_menu ul li.selected{background:#dadada; cursor:pointer; } 
.hide{ display:none;} 

網(wǎng)頁選項(xiàng)卡

相關(guān)文章

qTip 基于JQuery的Tooltip插件[兼容性好]
qTip是一個(gè)實(shí)現(xiàn)圓角對(duì)話氣泡框樣式的Tooltip jQuery插件。支持多種瀏覽器，可定制，功能強(qiáng)大。
2010-09-09
JQuery組件基于Bootstrap的DropDownList（完整版）
這篇文章主要介紹了JQuery組件基于Bootstrap的DropDownList的完整版，在原有基礎(chǔ)上進(jìn)行完善功能，感興趣的小伙伴們可以參考一下
2016-07-07
Javascript 驗(yàn)證上傳圖片大小[客戶端]
在做上傳圖片的時(shí)候，如果不限制上傳圖片大小，后果非常的嚴(yán)重。那么我們?cè)鯓硬趴梢越鉀Q一個(gè)棘手的問題呢？
2009-08-08
jquery可定制的在線UEditor編輯器
這篇文章主要介紹了jquery可定制的在線UEditor編輯器，UEditor的功能非常強(qiáng)大，ueditor更具有功能插件接口，很輕松地添加自己定義功能到編輯器中，方便項(xiàng)目的不同需求，需要的朋友可以參考下
2015-11-11
使用CamanJS在Web頁面上處理圖像的技巧
CamanJs庫用于個(gè)人項(xiàng)目中進(jìn)行使用的圖形操作庫，這個(gè)庫是基于JavaScript的canvas操作庫，接下來，通過本篇文章給大家詳細(xì)介紹使用CamanJS在Web頁面上處理圖像的技巧，需要的朋友一起來學(xué)習(xí)下
2015-08-08
jQuery 插件開發(fā)指南
jQuery憑借其簡潔的API，對(duì)DOM強(qiáng)大的操控性，易擴(kuò)展性越來越受到web開發(fā)人員的喜愛，經(jīng)常有人詢問一些技巧，因此干脆寫這么一篇文章給各位jQuery愛好者，算是拋磚引玉吧。
2014-11-11
jquery上傳插件fineuploader上傳文件使用方法(jquery圖片上傳插件)
這篇文章主要介紹了jquery插件fineuploader上傳文件很用方法
2013-12-12
jQuery中toggleClass()方法用法實(shí)例
這篇文章主要介紹了jQuery中toggleClass()方法用法,實(shí)例分析了toggleClass()方法的功能、定義及對(duì)添加或移除匹配元素的一個(gè)或多個(gè)類進(jìn)行切換的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能
本文通過實(shí)例代碼給大家分享了jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能，需要的朋友參考下吧
2018-01-01
jQuery設(shè)置Cookie及刪除Cookie實(shí)例分析
這篇文章主要介紹了jQuery設(shè)置Cookie及刪除Cookie的方法,結(jié)合完整實(shí)例形式分析了jQuery操作cookie的設(shè)置,獲取及刪除等操作技巧,需要的朋友可以參考下
2016-04-04