JQuery study notes to achieve image flipping effect and TAB label switching effect

JQuery study notes to achieve image flipping effect and TAB label switching effect_jquery

PHP中文网

Release： 2016-05-16 18:58:24

Original

1418 people have browsed it

In order to ensure the cleanliness of the front page, we habitually put CSS into a separate .CSS file for calling, and JS can also be placed into a separate JS file, and events on the page such as onclick, Onmouseover can also be separated. JQuery

is quite popular on the Internet now, so I downloaded one to learn. I converted several JS codes I wrote before into JQuery, which not only ensures the clarity of the code, but also ensures the code The versatility of it really kills two birds with one stone. Since I am a beginner, the code has many shortcomings. Please correct me:)
1. To achieve the image flipping effect, DW itself provides this function, but it is better to write it yourself. Use, haha. The previous way of writing was cumbersome and the code was messy. After modification with JQuery, it can be made clearer. The core code is as follows:
JS code

Copy code The code is as follows :

<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>

Copy after login

The HTML part is as follows:

Copy code The code is as follows:

<p id="Menu"> 
<ul id="Nav"> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_Home.gif" border="0" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_Intro.gif" border="0" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_Lerrn_On.gif" border="0" class="active" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_Studet.gif" border="0" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_Job.gif" border="0" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_About.gif" border="0" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
</ul> 
</p>

Copy after login

Here It should be noted that the name of the unflipped picture does not have _On, such as Menu_Home.gif, while the picture name of the flipped picture has _On, such as Menu_Home_On.gif

2. JQuery implements the Tab tag writing effect , this is more commonly used. The code written in JS before was still very messy, and the code was not separated. After the transformation, part of the code is as follows:
JS code:

Copy code The code is as follows:

<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>

Copy after login

HTML code:

Copy code The code is as follows:

<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>

Copy after login

CSS code:

Copy code The code is as follows:

#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; 
}

Copy after login

Finally attached is an effect:

The above is the content of JQuery study notes to achieve image flipping effect and TAB label switching effect_jquery. For more related content, please pay attention to the PHP Chinese website (www.php.cn )!