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

jquery 選項卡效果 新手代碼

 更新時間:2011年07月08日 00:01:09   作者:  
對jquery只是才涉足,如有不適合,請各位多多指教。
jquery代碼
復制代碼 代碼如下:

$(function(){
//選項卡
var $qqbind=$("#qq_1_1 ul li"); //獲取要變化的標題為了設(shè)置它背景色變化
$qqbind.click(function(){
var ch=$qqbind.has("pre"); //去找?guī)в衟re這個標簽的標題;pre是設(shè)置她的背景樣式下面要用
ch.html(ch.children("pre").html()); //把帶有pre標簽的去掉
$(this).wrapInner("<pre></pre>"); //給當前得$qqbind的內(nèi)容上包圍<pre> 元素:

$("#tab_bx").children("div").removeClass("show123").addClass("hide123"); //找到id未tab_bx得div移除顯示并隱藏
$("#div"+$(this).attr("name")).addClass("show123"); //找到div并把li中name得值賦給要顯示的div
});

})

html代碼
復制代碼 代碼如下:

<!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" />
<style>
pre{margin: 0px;padding: 0px;background-color: #00CC33;height: 38px;width: 132px;float: left; background-color:#C90}
.show{display:inline; z-index:100;}
.hidde{display:none}
#qq_1 { float: left;height: auto;width: 770px;}
#qq_1 #qq_1_1 {height: 38px;width: 100%;}
#qq_1_1 ul {margin: 0px;padding: 0px;float: left;width: 100%;}
#qq_1_1 li { cursor:pointer; display: block;height: 38px;list-style-type: none;float: left;margin: 0px;padding: 0px;width: 132px;line-height: 38px;
text-align: center;font-size: 18px;font-family: "黑體";background-image: url(../images/0123_2.jpg);background-repeat: repeat-y;}

#qq_1 .qq_1_2 { float: left;height: 280px;width: 100%;border: 1px solid #CCCCCC;padding-top: 12px;font-size: 13px;padding-right: 0%;
padding-left: 0%; padding-bottom: 1px;}

</style>
<script language="javascript" type="text/javascript" src="JS/jquery-1.4.2.js"></script>
<script>
$(document).ready(function(){
var $qqbind=$("#qq_1_1 ul li"); //獲取要變化的標題為了設(shè)置它背景色變化
$qqbind.click(function(){
var ch=$qqbind.has("pre");//去找?guī)в衟re這個標簽的標題;pre是設(shè)置她的背景樣式下面要用
ch.html(ch.children("pre").html()); //把帶有pre標簽的去掉
$(this).wrapInner("<pre></pre>");//給當前得$qqbind的內(nèi)容上包圍<pre> 元素:
$("#tab_bx").children("div").removeClass("show").addClass("hidde");");//找到id未tab_bx得div移除顯示并隱藏
$("#div"+$(this).attr("name")).addClass("show");//找到div并把li中name得值賦給要顯示的div
alert("#div"+$(this).attr("name"));
});
});
</script>
<title>測試</title>

</head>

<body>
<div id="qq_1_1">
<ul>
<li name="1">
<pre> QQ幣充值</pre>
</li>
<li name="2"> 包月服務(wù)</li>
</ul>
</div>
<div id="tab_bx">
<div id="div1" class="show">QQ幣頁面</div>
<div id="div2" class="hidde">游戲頁面</div>
</div>
</body>
</html>

相關(guān)文章

  • jQuery中size()方法用法實例

    jQuery中size()方法用法實例

    這篇文章主要介紹了jQuery中size()方法用法,實例分析了size()方法返回對象集合中元素數(shù)目的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • javascript中用星號表示預錄入內(nèi)容的實現(xiàn)代碼

    javascript中用星號表示預錄入內(nèi)容的實現(xiàn)代碼

    在一個WEB項目中,有一個比較特殊點的文本框客戶要求實現(xiàn)在那個文本框錄入數(shù)據(jù)前先用星號(*)表示要錄入的信息(那個文本框要錄入的數(shù)據(jù)位數(shù)是已知的
    2011-01-01
  • AeroWindow 基于JQuery的彈出窗口插件

    AeroWindow 基于JQuery的彈出窗口插件

    AeroWindow是個Win7樣式的彈出窗口,jQuery插件,效果很酷!而且還像windows的窗口一樣可最大,最小化,隨意拖動。
    2011-06-06
  • jquery.cvtooltip.js 基于jquery的氣泡提示插件

    jquery.cvtooltip.js 基于jquery的氣泡提示插件

    顯示氣泡提示的前提是,一定會有一個被提示的對象,默認的位置是根據(jù)body來計算的,這樣的壞處就是如果頁面內(nèi)容發(fā)生了變化,而氣泡的位置沒有改變,導致提示目的失敗。
    2010-11-11
  • jquery 學習之二 屬性(類)

    jquery 學習之二 屬性(類)

    jquery 學習之二 屬性(類),需要的朋友可以參考下。
    2010-11-11
  • jQuery中Dom的基本操作小結(jié)

    jQuery中Dom的基本操作小結(jié)

    本篇文章主要是對jQuery中Dom的基本操作進行了詳細的總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-01-01
  • jQuery常見的選擇器及用法介紹

    jQuery常見的選擇器及用法介紹

    選擇器的意義就是將眾多html代碼中準確的找出我們想找的單元。接下來將常見的選擇器以及作用列舉出來,對jQuery常見的選擇器及用法感興趣的朋友一起看看吧
    2016-12-12
  • 基于DOM節(jié)點刪除之empty和remove的區(qū)別(詳解)

    基于DOM節(jié)點刪除之empty和remove的區(qū)別(詳解)

    下面小編就為大家?guī)硪黄贒OM節(jié)點刪除之empty和remove的區(qū)別(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • jQuery的each循環(huán)用法簡單示例

    jQuery的each循環(huán)用法簡單示例

    這篇文章主要介紹了jQuery的each循環(huán)用法,以簡單實例形式分析了jQuery中each循環(huán)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • jQuery中的常用事件介紹

    jQuery中的常用事件介紹

    這篇文章介紹了jQuery中的事件,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-03-03

最新評論