設計思路:
多個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 ...