jquery画像タブ切り替えeffect_jquery-jsチュートリアル-php.cn

复制代 代码如下: body { マージン: 10px auto; 幅: 570ピクセル; フォント: 75%/120% Arial、Helvetica、サンセリフ; } .accordion { 幅: 480px; ボーダーボトム: 実線 1px #c4c4c4; } .accordion h3 { background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px; パディング: 7px 15px; マージン: 0; フォント: 太字 120%/100% Arial、Helvetica、サンセリフ; ボーダー: 実線 1px #c4c4c4; ボーダーボトム: なし; カーソル: ポインタ; } .accordion h3:hover { 背景色: #e3e2e2; } .accordion h3.active { background-position: right 5px; } .accordion p { 背景: #f7f7f7; マージン: 0; パディング: 10px 15px 20px; ボーダー左: 実線 1px #c4c4c4; ボーダー右: 実線 1px #c4c4c4; } --> 質問 1 サンプルテキスト Lorem ipsum dolor sit amet, consectetuer adipiscing elit.モルビ・マレスアダ、フェギア・ティンシダントのアンテ、エニム・マッサ・グラビダ・メトゥス、コモド・ラキニア・マッサ ディアム・ヴェル・エロス。プロインエゲットウルナ。 Nunc fringilla neque vitae odio。 Vivamus vitae ligula。 これは質問 2 です。 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.モルビ・マレスアダ、フェギア・ティンシダントのアンテ、エニム・マッサ・グラビダ・メトゥス、コモド・ラキニア・マッサ ディアム・ヴェル・エロス。プロインエゲットウルナ。 Nunc fringilla neque vitae odio。 Vivamus vitae ligula。 別の質問はこちら Lorem ipsum dolor sit amet, consectetuer adipiscing elit.モルビ・マレスアダ、フェギア・ティンシダントのアンテ、エニム・マッサ・グラビダ・メトゥス、コモド・ラキニア・マッサ ディアム・ヴェル・エロス。プロインエゲットウルナ。 Nunc fringilla neque vitae odio。 Vivamus vitae ligula。 サンプル見出し Lorem ipsum dolor sit amet, consectetuer adipiscing elit.モルビ・マレスアダ、フェギア・ティンシダントのアンテ、エニム・マッサ・グラビダ・メトゥス、コモド・ラキニア・マッサ ディアム・ヴェル・エロス。プロインエゲットウルナ。 Nunc fringilla neque vitae odio。 Vivamus vitae ligula。 質問の見出しのサンプル Lorem ipsum dolor sit amet, consectetuer adipiscing elit.モルビ・マレスアダ、フェギア・ティンシダントのアンテ、エニム・マッサ・グラビダ・メトゥス、コモド・ラキニア・マッサ ディアム・ヴェル・エロス。プロインエゲットウルナ。 Nunc fringilla neque vitae odio。 Vivamus vitae ligula。 // $(function(){ /* $('.accordion h3').click(function ( ){ $('.accordion p').hide(); $(this).next().show(); });*/ var Q = { h3: $('.accordion h3'), p: $('.accordion p'), qiehuan: function (){ this.h3.click(function (){ Q.p.hide(); $(this).next().show(); } }; }); // ]]>