div模擬頁面切換

2021-07-04 13:06:08 字數 1364 閱讀 1219

設計思路:

多個div每個div單獨占用一整頁需要跳頁時使用div的顯示(新頁)和隱藏(舊頁)即可。

經測試隱藏div(頁)與顯示div(頁)之間的事件並不會相互影響

其實設計思路和jqm(jquerymobile)設定思路一致

jqm裡面是以data-role="page"來表明這是乙個頁面級的div

這裡是第一頁

這裡是第二頁

這裡是第三頁

css**如下:

.page

.page1

.page2

.page3

js**

$(function() );

$("#page1").css();

});$("#showpage2").on("click", function() );

$("#page2").css();

});$("#showpage3").on("click", function() );

$("#page3").css();

})$(".page").on("click",function())

});

這樣頁面已經可以正常的切換了,如果想跟真實一點可以設定顯示div的寬度和高度和視窗的寬度和高度一致即可。在顯示的div裡新增跳轉的事件

顯示好了之後需求又說頁面之間的切換要有乙個滑動的效果,咋辦?做唄。jqm已經有現成的可以拿來用也可以自己寫

html

css:

.d1, .d2,.d3 

.d1

.d2

.d3

js**:

$(function() , 1000);

$("#d2").animate(, 1000);

});$("#bt2").on("click", function(e) , 1000);

$("#d1").animate(, 1000);

});$("#bt3").on("click", function(e) , 1000);

$("#d3").animate(, 1000);

});$("#bt4").on("click", function(e) , 1000);

$("#d1").animate(, 1000);

});});

在做頁面跳轉(div切換)時肯定知道當前是哪個div,要覆蓋該div的是哪個div這樣就不會出現問題了。

div切換 div輪換顯示

alt 網易學院05年軟體評選結果 width 240 height 180 border 0 經過大家的熱情投票和我們的辛勞整理,網易學院2005年年度軟體評選結果終於出爐啦。點選進入檢視 class cdred 詳細 alt 顛覆叢林動物生存法則 width 240 height 180 bor...

普通 div 模擬 placeholder

這是由於我們專案中使用的 quasar 元件裡的 editor 實際是 div 元素 的佔位符問題引起的 首先說明一下,非表單元素如 div 可以通過加乙個 contenteditable 為 true 來實現可編輯。然後給該元素新增佔位符樣式。最終採用的純css實現普通div的placeholde...

通過div模擬table

參考 不要使用內聯樣式,但只是為了了解這裡是如何去 這裡的乙個簡單的技巧是,如果你不需要的話,你甚至不需要錶行元素.一組顯示 表單元格 元素是顯示的子元素 表 元素將表現為它們都在同一行中。您總是更改元素的顯示屬性,以獲取表樣式行為.display table display table cell ...