溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jQuery中怎么切換頁面布局，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
<a href="#" id="switch">切換布局</a>
<p id="demo" class="showlist">
<p class="list">
<h4><a href="#">文章標題</a></h4>
<p>文章摘要</p>
</p>
...
</p>
XHTML結構中，在#demo中放入了多個.list，用于顯示文章標題和摘要。通過下面的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}
我們要設置最外層的#demo樣式，使其具有統一外觀，包括背景色和邊框樣式。注意，我們在最后要設置一個樣式.showblock .list，控制#demo里的.list樣式，使其向左浮動，并設置高度和寬度，設置.showblock其實就是設置#demo的樣式，在接下來的jQuery代碼中，你就會明白了。當然您可以根據需求自行設計CSS和XHTML，本文只是為了演示簡單的構建了樣式和HTML結構。
實現切換布局的原理其實就是，用javascript來控制頁面顯示的樣式，當用戶點擊切換時，引用不同的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");
});
});
});
看完上述內容，你們掌握jQuery中怎么切換頁面布局的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
