jquery實(shí)現(xiàn)經(jīng)典的淡入淡出選項(xiàng)卡效果代碼

更新時(shí)間：2015年09月22日 11:12:02 作者：企鵝

這篇文章主要介紹了jquery實(shí)現(xiàn)經(jīng)典的淡入淡出選項(xiàng)卡效果代碼,通過(guò)簡(jiǎn)單的jQuery鼠標(biāo)事件及鏈?zhǔn)讲僮鲗?shí)現(xiàn)淡入淡出效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)經(jīng)典的淡入淡出選項(xiàng)卡效果代碼。分享給大家供大家參考。具體如下：

這是一款經(jīng)典的Tab選項(xiàng)卡代碼,帶有淡入淡出效果,jquery插件實(shí)現(xiàn),希望大家能夠喜歡,界面未做美化.感興趣的朋友可以?xún)?yōu)化一下

運(yùn)行效果截圖如下：

在線(xiàn)演示地址如下：

http://demo.jb51.net/js/2015/jquery-jd-fade-in-out-style-tab-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>經(jīng)典選項(xiàng)卡</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style type="text/css">
.tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;}
.tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;}
.tab dt strong{padding:0 15px;color:#444;}
.tab dt a{display:inline-block;cursor:pointer;padding:0 10px;text-align:center;background:#f1f1f1;color:#000;}
.tab dt a.on{background:#fff;color:#333;font-weight:bold;border-bottom:1px solid #fff;border-right:1px solid #ccc;border-left:1px solid #ccc;}
.tab dd{padding:10px;height:200px;clear:both;}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
 var tabTitle = ".tab dl dt a";
 var tabContent = ".tab dl ul";
 $(tabTitle + ":first").addClass("on");
 $(tabContent).not(":first").hide();
 $(tabTitle).unbind("click").bind("click", function(){
  $(this).siblings("a").removeClass("on").end().addClass("on");
  var index = $(tabTitle).index( $(this) );
  $(tabContent).eq(index).siblings(tabContent).hide().end().fadeIn("slow");
 });
});
</script>
<div class="tab">
 <dl>
  <dt><strong>經(jīng)典選項(xiàng)卡</strong><a>手機(jī)賣(mài)場(chǎng)</a><a>腳本之家</a><a>海瀾男人</a><a>精品居家</a></dt>
  <dd>
  <ul>1111111111111111111111</ul>
  <ul>22222222222222222</ul>
  <ul>333333333333333333333</ul>
  <ul>444444444444444444</ul>
 </dd>
 </dl>
</div>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

前端jQuery復(fù)制文本到剪貼板功能實(shí)現(xiàn)
這篇文章主要介紹了前端如何使用jQuery實(shí)現(xiàn)點(diǎn)擊“復(fù)制”按鈕時(shí),獲取并復(fù)制父級(jí)元素下子元素的文本HTML代碼的功能,文中給出了實(shí)現(xiàn)的詳細(xì)代碼,需要的朋友可以參考下
2025-01-01
jQuery:unbind方法的使用詳解
這篇文章主要介紹了jQuery:unbind方法的使用詳解的相關(guān)資料,unbind方法只能解綁用jQuery的bind方法以及用jquery方法注冊(cè)的事件處理程序，需要的朋友可以參考下
2017-08-08
EasyUI折疊表格層次顯示detailview詳解及實(shí)例
這篇文章主要介紹了EasyUI折疊表格層次顯示detailview詳解及實(shí)例,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2016-12-12
jQuery實(shí)現(xiàn)中獎(jiǎng)播報(bào)功能（讓文本滾動(dòng)起來(lái)）簡(jiǎn)單設(shè)置數(shù)值即可
這篇文章主要介紹了jQuery實(shí)現(xiàn)中獎(jiǎng)播報(bào)功能（讓文本滾動(dòng)起來(lái)）簡(jiǎn)單設(shè)置數(shù)值即可,文中通過(guò)實(shí)例代碼給大家詳細(xì)介紹，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-03-03
jquery 字符串切割函數(shù)substring的用法說(shuō)明
本篇文章主要是對(duì)jquery字符串切割函數(shù)substring的用法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
基于jquery實(shí)現(xiàn)圖片廣告輪換效果代碼
基于jquery實(shí)現(xiàn)圖片廣告輪換效果代碼，需要的朋友可以參考下。
2011-07-07
jquery+javascript編寫(xiě)國(guó)籍控件
本文給大家分享一個(gè)自己編寫(xiě)的使用jquery+javascript實(shí)現(xiàn)的國(guó)籍控件，效果非常不錯(cuò)，這里推薦給大家。
2015-02-02
jQuery仿360導(dǎo)航頁(yè)圖標(biāo)拖動(dòng)排序效果代碼分享
這篇文章主要為大家詳細(xì)介紹了360導(dǎo)航頁(yè)圖標(biāo)拖動(dòng)排序效果代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-08-08
jQuery實(shí)現(xiàn)帶玻璃流光質(zhì)感的手風(fēng)琴特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶玻璃流光質(zhì)感的手風(fēng)琴特效，是一款基于jQuery+CSS3實(shí)現(xiàn)手風(fēng)琴特效，希望你可以喜歡。
2015-11-11
基于jQuery的Web上傳插件Uploadify使用示例
Uploadify是一款比較有人氣的頁(yè)面上傳插件,Uploadify使用簡(jiǎn)單而且可定制性較高,接下來(lái)我們就一起來(lái)看下這款基于jQuery的Web上傳插件Uploadify使用示例
2016-05-05