欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

  • Web前端設(shè)計(jì)模式 制作漂亮的彈出層

    Web前端設(shè)計(jì)模式 制作漂亮的彈出層

    Ben最近在負(fù)責(zé)一個(gè)購(gòu)書(shū)網(wǎng)站，在網(wǎng)站的首頁(yè)上，有一個(gè)叫做“最新上架”的板塊，板塊的內(nèi)容比較簡(jiǎn)單，只有書(shū)籍名稱(chēng)，作者姓名和上架時(shí)間（如圖），當(dāng)初設(shè)計(jì)的時(shí)候并i沒(méi)有過(guò)于豐富的構(gòu)思
    2010-10-10
  • jQuery實(shí)現(xiàn)懸浮在右上角的網(wǎng)頁(yè)客服效果代碼

    jQuery實(shí)現(xiàn)懸浮在右上角的網(wǎng)頁(yè)客服效果代碼

    這篇文章主要介紹了jQuery實(shí)現(xiàn)懸浮在右上角的網(wǎng)頁(yè)客服效果代碼,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-10-10
  • jQuery中的height innerHeight outerHeight區(qū)別示例介紹

    jQuery中的height innerHeight outerHeight區(qū)別示例介紹

    這篇文章主要介紹了jQuery中的height innerHeight outerHeight的區(qū)別,需要的朋友可以參考下
    2014-06-06
  • jquery實(shí)現(xiàn)彈出窗口效果的實(shí)例代碼

    jquery實(shí)現(xiàn)彈出窗口效果的實(shí)例代碼

    這篇文章主要介紹了jquery實(shí)現(xiàn)彈出窗口效果的實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2013-11-11
  • jquery調(diào)用wcf并展示出數(shù)據(jù)的方法

    jquery調(diào)用wcf并展示出數(shù)據(jù)的方法

    網(wǎng)上看了很多jquery調(diào)用wcf的例子，可能是主機(jī)的原因，我用的是gd主機(jī)，所以都沒(méi)有成功，昨天自己搞了一天，終于成功了，現(xiàn)把方法和代碼和大家分享
    2011-07-07
  • jquery自動(dòng)補(bǔ)齊功能插件flexselect用法示例

    jquery自動(dòng)補(bǔ)齊功能插件flexselect用法示例

    這篇文章主要介紹了jquery自動(dòng)補(bǔ)齊功能插件flexselect用法,結(jié)合實(shí)例形式分析了flexselect實(shí)現(xiàn)自動(dòng)補(bǔ)齊功能的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2016-08-08
  • jquery ready()的幾種實(shí)現(xiàn)方法小結(jié)

    jquery ready()的幾種實(shí)現(xiàn)方法小結(jié)

    下面是目前本人知道的幾種jQuery的ready ()的寫(xiě)法.如果還有其他的寫(xiě)法，望告知
    2010-06-06
  • jQuery回調(diào)方法使用示例

    jQuery回調(diào)方法使用示例

    這篇文章主要介紹了jQuery回調(diào)方法使用,結(jié)合具體實(shí)例形式分析了jQuery回調(diào)方法的原理、定義及使用方法,需要的朋友可以參考下
    2017-06-06
  • Jquery實(shí)現(xiàn)的角色左右選擇特效

    Jquery實(shí)現(xiàn)的角色左右選擇特效

    這篇文章主要介紹了Jquery實(shí)現(xiàn)的角色左右選擇特效,需要的朋友可以參考下
    2014-05-05
  • jquery 插件實(shí)現(xiàn)圖片延遲加載效果代碼

    jquery 插件實(shí)現(xiàn)圖片延遲加載效果代碼

    前幾天上QQ的在線(xiàn)視頻網(wǎng)站，看到上面的影片列表頁(yè)的圖片有這樣一種效果：當(dāng)向下拉動(dòng)滾動(dòng)條時(shí)下面的圖片才開(kāi)始加載，就是說(shuō)它不會(huì)一下子把所有的圖片都加載出來(lái)，拉動(dòng)滾動(dòng)條后用戶(hù)看到了才會(huì)顯示，這是一個(gè)很不錯(cuò)的用戶(hù)體驗(yàn)。
    2010-02-02

最新評(píng)論