jQuery中怎么切換頁(yè)面布局，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
文章摘要切換布局
文章標(biāo)題
XHTML結(jié)構(gòu)中，在#demo中放入了多個(gè).list，用于顯示文章標(biāo)題和摘要。通過(guò)下面的CSS來(lái)控制外觀。
#demo{width:680px; margin:20px auto; padding:4px; background:#f7f7f7;
border:1px solid #d3d3d3}
.list{margin:6px}
.list h4{height:26px; line-height:26px; font-size:14px}
.list p{line-height:20px}
.showblock .list{float:left; width:325px; height:100px}
我們要設(shè)置最外層的#demo樣式，使其具有統(tǒng)一外觀，包括背景色和邊框樣式。注意，我們?cè)谧詈笠O(shè)置一個(gè)樣式.showblock .list，控制#demo里的.list樣式，使其向左浮動(dòng)，并設(shè)置高度和寬度，設(shè)置.showblock其實(shí)就是設(shè)置#demo的樣式，在接下來(lái)的jQuery代碼中，你就會(huì)明白了。當(dāng)然您可以根據(jù)需求自行設(shè)計(jì)CSS和XHTML，本文只是為了演示簡(jiǎn)單的構(gòu)建了樣式和HTML結(jié)構(gòu)。
實(shí)現(xiàn)切換布局的原理其實(shí)就是，用javascript來(lái)控制頁(yè)面顯示的樣式，當(dāng)用戶(hù)點(diǎn)擊切換時(shí)，引用不同的CSSy樣式。請(qǐng)看下面的jQuery代碼。
$(function(){
$("#switch").toggle(function(){
$("#demo").fadeOut("fast",function(){
$(this).fadeIn("fast").addClass("showblock");
});
},function(){
$("#demo").fadeOut("fast",function(){
$(this).fadeIn("fast").removeClass("showblock");
});
});
});
看完上述內(nèi)容，你們掌握jQuery中怎么切換頁(yè)面布局的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
重慶分公司
重慶分公司
