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

成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供商丘網(wǎng)站建設(shè)、商丘做網(wǎng)站、商丘網(wǎng)站設(shè)計(jì)、商丘網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、商丘企業(yè)網(wǎng)站模板建站服務(wù)，10年商丘做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

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中放入了多個(gè).list，用于顯示文章標(biāo)題和摘要。通過(guò)下面的CSS來(lái)控制外觀(guān)。

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)一外觀(guān)，包括背景色和邊框樣式。注意，我們?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)。

jQuery

實(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è)資訊頻道，感謝各位的閱讀！

網(wǎng)頁(yè)名稱(chēng)：jQuery中怎么切換頁(yè)面布局-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://jinyejixie.com/article22/dedgcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、微信小程序、軟件開(kāi)發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)