jQuery中怎么切換頁面布局

jQuery中怎么切換頁面布局，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

HTML

<a href="#" id="switch">切換布局</a> <p id="demo" class="showlist">    <p class="list">       <h4><a href="#">文章標(biāo)題</a></h4>       <p>文章摘要</p>    </p>    ... </p>

XHTML結(jié)構(gòu)中，在#demo中放入了多個.list，用于顯示文章標(biāo)題和摘要。通過下面的CSS來控制外觀。

CSS

#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)一外觀，包括背景色和邊框樣式。注意，我們在最后要設(shè)置一個樣式.showblock .list，控制#demo里的.list樣式，使其向左浮動，并設(shè)置高度和寬度，設(shè)置.showblock其實(shí)就是設(shè)置#demo的樣式，在接下來的jQuery代碼中，你就會明白了。當(dāng)然您可以根據(jù)需求自行設(shè)計CSS和XHTML，本文只是為了演示簡單的構(gòu)建了樣式和HTML結(jié)構(gòu)。

jQuery

實(shí)現(xiàn)切換布局的原理其實(shí)就是，用javascript來控制頁面顯示的樣式，當(dāng)用戶點(diǎn)擊切換時，引用不同的CSSy樣式。請看下面的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中怎么切換頁面布局的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！