DIV CSS 佈局教程網

所以自己也下了一個來學習，把之前寫的幾個JS代碼都轉換成JQuery，既能保證代碼的清晰，也保證了代碼的通用性，真是一舉兩得啊，由於是初學者，所以代碼有許多的不足，還請大家多多指正：）
1、實現圖片翻轉效果，DW本身提供了這個功能，不過還是自己寫的好用，呵呵。之前寫的方式比較麻煩，代碼也比較亂，用JQuery改造後可以使其更加清晰，核心代碼如下：
JS代碼
代碼如下:
<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部分如下：
代碼如下:
<div 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>
</div>

這裡需要注意的是未翻轉的圖片名為沒有_On，部分，如Menu_Home.gif，而翻轉圖片的圖片名帶_On，如Menu_Home_On.gif

2、JQuery實現Tab標簽寫換效果，這個比較常用到，之前用JS寫的代碼依舊很亂，而且代碼沒有分離開，改造後部分代碼如下：
JS代碼：
代碼如下:
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#MenuTabs div").mouseover(function(){
$(this).css("cursor","pointer");
var checkmenu = $(this).attr("id");
var checkcontent = checkmenu.replace("MenuTab","Content");
$("#MenuTabs div").each(function(){
if($(this).attr("id") == checkmenu){
$(this).attr("class","Tab_On");
}else{
$(this).attr("class","Tab_Off");
}
});
$("#Contents div").each(function(){
if($(this).attr("id") == checkcontent){
$(this).css("display","block");
}else{
$(this).css("display","none");
}
});
});
});
//-->
</script>

HTML代碼：
代碼如下:
<div style="padding-top:10px;">
<div id="MenuTabs" style="float:left;" align="left">
<div id="MenuTab1" class="Tab_Off"> 標題一</div>
<div id="MenuTab2" class="Tab_Off"> 標題二</div>
<div id="MenuTab3" class="Tab_On"> 標題三</div>
<div id="MenuTab4" class="Tab_Off"> 標題四</div>
</div>
<div id="Contents" style="float:left;">
<div id="Content1" style="display:none;">內容一</div>
<div id="Content2" style="display:none;">內容二</div>
<div id="Content3" style="display:block;">內容三</div>
<div id="Content4" style="display:none;">內容四</div>
</div>
</div>

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

最後附一張效果：


以上就是今天的學習總結，這裡因為測試的原因，我沒有單獨放到JS文件中，不過大家可以將以上代碼放到同一個JS文件中去，這樣可以方便調用，再有就是記得一定要引入JQuery框架文件啊...