画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery

フロント ページのクリーンさを確保するために、呼び出し用に CSS を別の .CSS ファイルに入れることが習慣になっています。また、JS を別の JS ファイルに入れることもできます。また、onclick、Onmouseover などのページ上のイベントは、 JQuery

は現在インターネットで非常に人気があるので、以前に書いたいくつかの JS コードを JQuery に変換しました。これにより、コードが明確になるだけでなく、コードの多機能性はまさに一石二鳥です。私は初心者なので、コードには多くの欠点があります。修正してください:)
1. 画像の反転効果を実現するために、DW 自体がこの機能を提供しています。自分で書いたほうがいいですよ（笑）。以前の書き方は面倒でコードがごちゃごちゃしていましたが、JQuery で修正すると、コアのコードは次のようになります。

コード コードは次のとおりです。

<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
$("#Nav li a img").mouseover(function(){ 
var m = $(this).attr("src"); 
if(m.indexOf("On") < 0){ 
var n = m.split("."); 
var f = n[0] + "_On"; 
var nf = f + "." + n[1]; 
$(this).attr("src",nf); 
} 
}); 
$("#Nav li a img").mouseout(function(){ 
var m = $(this).attr("src"); 
if(m.indexOf("On") >= 0 && $(this).attr("class") != "active"){ 
var n = m.split("."); 
var f = n[0].substring(0,n[0].length-3); 
var nf = f + "." + n[1]; 
$(this).attr("src",nf); 
} 
}); 
}); 
//--> 
</script>

HTML 部分は次のとおりです。

コードをコピーします コードは次のとおりです:

<p id="Menu"> 
<ul id="Nav"> 
<li><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_Line.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></li> 
<li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_Home.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></a></li> 
<li><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_Line.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></li> 
<li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_Intro.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></a></li> 
<li><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_Line.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></li> 
<li><a href="#"><img  class="active lazy"  src="/static/imghwm/default1.png"  data-src="Images/Menu_Lerrn_On.gif"   border="0"  / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></a></li> 
<li><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_Line.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></li> 
<li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_Studet.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></a></li> 
<li><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_Line.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></li> 
<li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_Job.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></a></li> 
<li><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_Line.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></li> 
<li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_About.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></a></li> 
<li><img  src="/static/imghwm/default1.png"  data-src="Images/Menu_Line.gif"  class="lazy"   border="0" / alt="画像反転効果とTABラベル切り替え効果を実現するJQuery学習メモeffect_jquery" ></li> 
</ul> 
</p>

ここ 反転されていない画像の名前には、Menu_Home.gif などの _On がありませんが、反転された画像の画像名には、Menu_Home_On などの _On が付いていることに注意してください。 .gif

2. JQuery は Tab タグの書き込み効果を実装します。これは、以前に JS で書かれたコードがまだ非常に複雑で、変換後もコードの一部が分離されていませんでした。
JS コード:

コードをコピー コードは次のとおりです:

<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
$("#MenuTabs p").mouseover(function(){ 
$(this).css("cursor","pointer"); 
var checkmenu = $(this).attr("id"); 
var checkcontent = checkmenu.replace("MenuTab","Content"); 
$("#MenuTabs p").each(function(){ 
if($(this).attr("id") == checkmenu){ 
$(this).attr("class","Tab_On"); 
}else{ 
$(this).attr("class","Tab_Off"); 
} 
}); 
$("#Contents p").each(function(){ 
if($(this).attr("id") == checkcontent){ 
$(this).css("display","block"); 
}else{ 
$(this).css("display","none"); 
} 
}); 
}); 
}); 
//--> 
</script>

HTML コード:

コードをコピー コードは次のとおりです:

<p style="padding-top:10px;"> 
<p id="MenuTabs" style="float:left;" align="left"> 
<p id="MenuTab1" class="Tab_Off"> 标题一</p> 
<p id="MenuTab2" class="Tab_Off"> 标题二</p> 
<p id="MenuTab3" class="Tab_On"> 标题三</p> 
<p id="MenuTab4" class="Tab_Off"> 标题四</p> 
</p> 
<p id="Contents" style="float:left;"> 
<p id="Content1" style="display:none;">内容一</p> 
<p id="Content2" style="display:none;">内容二</p> 
<p id="Content3" style="display:block;">内容三</p> 
<p id="Content4" style="display:none;">内容四</p> 
</p> 
</p>

CSS コード:

コードをコピー コードは次のとおりです:

#Contents{ 
width:318px; 
height:125px; 
border-top:1px #d1d1d1 solid; 
border-right:1px #d1d1d1 solid; 
border-bottom:1px #d1d1d1 solid; 
color:#d1d1d1; 
} 
.Tab_Off{ 
width:132px; 
height:30px; 
background-color:#ebebeb; 
vertical-align:middle; 
line-height:30px; 
color:#373737; 
border-bottom:1px #f6f6f6 solid; 
border-top:1px #f6f6f6 solid; 
border-left:1px #ededed solid; 
border-right:1px #d1d1d1 solid; 
} 
.Tab_On{ 
width:132px; 
height:30px; 
background-color:#FFFFFF; 
vertical-align:middle; 
line-height:30px; 
color:#696969; 
border-top:1px #dbdbdb solid; 
border-bottom:1px #dbdbdb solid; 
border-left:1px #dbdbdb solid; 
border-right:1px #FFFFFF solid; 
}

最後にエフェクトが追加されます:

上記は、画像反転効果と TAB ラベル切り替え効果を実現するための JQuery 学習メモの内容です。さらに関連した内容については、PHP 中国語 Web サイト (www.php.cn ) に注目してください。