jquery實(shí)現(xiàn)超簡潔的TAB選項(xiàng)卡效果代碼

更新時(shí)間：2015年08月28日 12:06:38 作者：企鵝

這篇文章主要介紹了jquery實(shí)現(xiàn)超簡潔的TAB選項(xiàng)卡效果代碼,涉及jquery通過鼠標(biāo)click事件結(jié)合鏈?zhǔn)讲僮鲃討B(tài)操作tab選項(xiàng)卡的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)超簡潔的TAB選項(xiàng)卡效果代碼。分享給大家供大家參考。具體如下：

這是一款超簡潔的TAB選項(xiàng)卡，個(gè)人覺得有點(diǎn)太簡單，簡單的有點(diǎn)不習(xí)慣，美化修飾一下其實(shí)效果更好。實(shí)際上應(yīng)該為點(diǎn)擊過的TAB添加一個(gè)背景色，區(qū)分一下，這樣比較好。

先來看看運(yùn)行效果截圖：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-easy-tab-cha-menu-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超簡潔的TAB選項(xiàng)卡</title>
<style>
body {font:normal 12px/20px simsun; margin:0 auto; padding:0;} 
* {margin: 0px; padding: 0px;}
h4{font-size:14px;}
h5{font-size:12px;}
img {border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{text-decoration:underline; color:#ffae00;}
.menu li{width:60px; height:30px; text-align:center; line-height:30px; float:left; cursor:pointer;}
.menu li:hover, .menu li.on{color:#f00;}
.cont{width:180px; height:100px; border:1px solid #666666; clear:both;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $(".menu li").click(function(){   
  var Num=$(this).index("li");
  $(".menu li").removeClass("on").eq(Num).addClass("on");
  $(".cont").hide().eq(Num).show();  
  });       
 });
</script>
</head>
<body>
<div class="tab"> 
 <ul class="menu">
 <li class="on">北歐之旅</li>
 <li>音樂維也納</li>
 <li>天堂瑞士</li>
 </ul>
 <div class="cont">北歐之旅</div>
 <div class="cont" style="display:none;">音樂維也納</div>
 <div class="cont" style="display:none;">天堂瑞士</div>
</div>
</body>
</html>

希望本文所述對大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery插件HighCharts繪制2D帶有Legend的餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D帶有Legend的餅圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts繪制帶明細(xì)顯示的餅狀圖效果實(shí)現(xiàn)技巧,并附帶了demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jquery關(guān)于表格及表格列隱藏和顯示問題探討
本文為大家詳細(xì)介紹下關(guān)于指定表格及指定列的隱藏或顯示、獲取表格的列數(shù)等等表格相關(guān)的使用技巧，感興趣的朋友可以參考下哈，希望對大家有所幫助
2013-06-06
Juery解決tablesorter中文排序和字符范圍的方法
這篇文章主要介紹了Juery解決tablesorter中文排序和字符范圍的方法,實(shí)例分析了jQuery針對tablesorter中文排序和字符范圍的解決方法,需要的朋友可以參考下
2015-05-05
jQuery中delegate()方法的用法詳解
delegate()方法是為匹配元素的子元素添加一個(gè)或多個(gè)事件，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。下面就是詳細(xì)介紹，有需要的朋友可以來介紹一下。
2016-10-10
JQuery Easyui Tree的oncheck事件實(shí)現(xiàn)代碼
最近項(xiàng)目中有用到Easyui Tree，我想要checkbox的選中事件，但是api只提供了一個(gè)onClick事件，我百度、google之后，額，還是看js吧
2010-05-05
jQuery Form插件使用詳解_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery Form插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
jQuery的css()方法用法實(shí)例
這篇文章主要介紹了jQuery的css()方法用法,以實(shí)例形式較為詳細(xì)的分析了css()方法的幾種常見用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery 表單驗(yàn)證擴(kuò)展(四)
周末寫的 jQuery 表單驗(yàn)證擴(kuò)展(三) 這篇文章點(diǎn)擊率過低，不知道是文章太失水準(zhǔn)還是什么其他原因，這里寫文章只是為了分享一下自己寫代碼的心得，
2010-10-10
使用隱藏的new來創(chuàng)建對象
JQ中發(fā)現(xiàn)的，jQuery.Event類。估計(jì)作者是為了減少代碼量。定義一個(gè)類，但不用new關(guān)鍵字去創(chuàng)建該類對象，而使用方法調(diào)用()方式去創(chuàng)建該對象。
2011-03-03
JQuery Tips(2) 關(guān)于$()包裝集你不知道的
包裝集總是面向集合的，需要的朋友可以參考下。
2009-12-12