これはコンテンツ 1
これはコンテンツ 2
これはコンテンツ 3
現在、ページにはタグの効果がないため、ページにタグの効果を表示するには、CSS ファイルを片側に追加します:
コードをコピーします
コードは次のとおりです。
ホームページ > 記事 > ウェブフロントエンド > JQuery_jquery に基づくマルチタグ実装コード
JQuery_jquery に基づくマルチタグ実装コード
- WBOYオリジナル
- 2016-05-16 17:49:541098ブラウズ
今日共有したいのは、JQuery をベースにしたマルチタブ切り替えです。JQuery については、あまり紹介する必要はありません。もちろん、このような小さな例はたくさんあります。私自身の考えの。
次は、この例で使用される HTML ページです:
コードをコピーします コードは次のとおりです。次のように:
< ;!-- 日付: 2012-09-17 -->
現在、ページにはタグの効果がないため、ページにタグの効果を表示するには、CSS ファイルを片側に追加します:
コードをコピーします
コードは次のとおりです。
a{
display: block text-decoration: none; ; } #contenTab ul{ リストスタイル: なし; マージン:0px; #content div.showContent{ >line-height:100px;
表示: ブロック; 背景色:#B0C4DE;
.showTab{
背景色:#B0C4DE; : 1px ソリッド #B0C4DE;
div li{
background-color:#5F9EA0;
border-bottom: 1px ソリッド ホワイト
border-right; : 1 ピクセルの白;
高さ: 30 ピクセル;
テキストの位置: 中央; >#content div{
背景色: #B0C4DE;
クリア: 左;
高さ: 100 ピクセル;
ここまでは単なる静的なページであり、次のステップが最も重要な部分です。この部分はマウスを動かしてタグを切り替え、動的ページを実現する必要があります。別の JS ファイルを追加します。もちろん、JQuery に基づく JS ファイルは必須です。この例では、JQuery 公式 Web サイトから入手できる最新の jquery-1.8.1.min.js を使用します。この例ではラベル切り替えを実装します。
コードをコピー
コードは次のとおりです。
$( function(){
$("#contenTab li").each(function() {
var tab = $(this);
var timeoutID;
tab.hover(function(){
timeoutID = setTimeout(function(){
$(".showTab") .removeClass("showTab");
$(".showContent").removeClass("showContent");
tab.addClass("showTab");
$($("#content div" ).get($("#contenTab li").index(tab)).addClass("showContent"); >},300);
},function(){
});
これまでのところ、複数タブの切り替えが実装されています。この例については、次のような注意点があります:
1. マウスがラベル上に移動したとき (つまり、) にマウスの形状を手の形に変更するには、この例は次のようになります。もちろん、簡単な方法は、コンテンツを に追加することです。
2. JSコードではVar timeoutID = setTimeout(function, time)を使用していますが、これはマウスが速く動いた場合の誤操作を避けるためであり、関数内の遅延時間はミリ秒後に実行されるコンテンツ、つまり、マウスがラベルに移動したとき、即時の切り替えアクションは実装されませんが、マウスが時間ミリ秒以内にラベルから離れた場合、切り替えアクションは時間ミリ秒後に遅延します。 ClearTimeout(timeoutID) が実行されるため、関数内の内容は time ミリ秒後に実行されなくなり、マウスの素早い動きによる誤操作が回避されます。
今日はここまでです。お役に立てば幸いです。
.showTab{
背景色:#B0C4DE; : 1px ソリッド #B0C4DE;
div li{
background-color:#5F9EA0;
border-bottom: 1px ソリッド ホワイト
border-right; : 1 ピクセルの白;
高さ: 30 ピクセル;
テキストの位置: 中央; >#content div{
背景色: #B0C4DE;
クリア: 左;
高さ: 100 ピクセル;
ここまでは単なる静的なページであり、次のステップが最も重要な部分です。この部分はマウスを動かしてタグを切り替え、動的ページを実現する必要があります。別の JS ファイルを追加します。もちろん、JQuery に基づく JS ファイルは必須です。この例では、JQuery 公式 Web サイトから入手できる最新の jquery-1.8.1.min.js を使用します。この例ではラベル切り替えを実装します。
コードをコピー
コードは次のとおりです。
$( function(){
$("#contenTab li").each(function() {
var tab = $(this);
var timeoutID;
tab.hover(function(){
timeoutID = setTimeout(function(){
$(".showTab") .removeClass("showTab");
$(".showContent").removeClass("showContent");
tab.addClass("showTab");
$($("#content div" ).get($("#contenTab li").index(tab)).addClass("showContent"); >},300);
},function(){
});
これまでのところ、複数タブの切り替えが実装されています。この例については、次のような注意点があります:
1. マウスがラベル上に移動したとき (つまり、
2. JSコードではVar timeoutID = setTimeout(function, time)を使用していますが、これはマウスが速く動いた場合の誤操作を避けるためであり、関数内の遅延時間はミリ秒後に実行されるコンテンツ、つまり、マウスがラベルに移動したとき、即時の切り替えアクションは実装されませんが、マウスが時間ミリ秒以内にラベルから離れた場合、切り替えアクションは時間ミリ秒後に遅延します。 ClearTimeout(timeoutID) が実行されるため、関数内の内容は time ミリ秒後に実行されなくなり、マウスの素早い動きによる誤操作が回避されます。
今日はここまでです。お役に立てば幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。