標籤：html5 jqm jquery mobile 選項卡 模仿iphone手機案頭
我有一個水貨的上司，大家都是知道的。所以我就只能自學了，今天我給大家帶來的是jQuery Mobile 模仿iphone 手機案頭的選項卡功能。比如電話，簡訊，瀏覽器，音樂的標籤菜單。好吧，直接上代碼：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>jQuery Mobile模仿iphone功能表項目</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script type="text/javascript">//home菜單的onclick事件的處理方法function fun1(){//啟用nav1$('#nav1').addClass('ui-btn-active');//顯示我home菜單的內容$('#show1').css('display','');//grid,search,info都隱藏$('#show2').css('display','none');$('#show3').css('display','none');$('#show4').css('display','none');//nav2，nav3，nav4 取消啟用$('#nav2').removeClass('ui-btn-active');$('#nav3').removeClass('ui-btn-active');$('#nav4').removeClass('ui-btn-active');}//grid菜單的onclick事件的處理方法function fun2(){//啟用nav2$('#nav2').addClass('ui-btn-active');//顯示我grid菜單的內容,home,search,info都隱藏$('#show1').css('display','none');$('#show2').css('display','');$('#show3').css('display','none');$('#show4').css('display','none');//nav1，nav3，nav4 取消啟用$('#nav1').removeClass('ui-btn-active');$('#nav3').removeClass('ui-btn-active');$('#nav4').removeClass('ui-btn-active');}//search菜單的onclick事件的處理方法function fun3(){//啟用nav3$('#nav3').addClass('ui-btn-active');$('#show1').css('display','none');$('#show2').css('display','none');//顯示我search菜單的內容,home,grid,info都隱藏$('#show3').css('display','');$('#show4').css('display','none');//nav1，nav2，nav4 取消啟用$('#nav2').removeClass('ui-btn-active');$('#nav1').removeClass('ui-btn-active');$('#nav4').removeClass('ui-btn-active');}//info菜單的onclick事件的處理方法function fun4(){$('#nav4').addClass('ui-btn-active');$('#show1').css('display','none');$('#show2').css('display','none');$('#show3').css('display','none');//顯示我info菜單的內容,home,grid,search都隱藏$('#show4').css('display','');//nav1，nav2，nav3 取消啟用$('#nav2').removeClass('ui-btn-active');$('#nav3').removeClass('ui-btn-active');$('#nav1').removeClass('ui-btn-active');}</script> </head> <body> <div data-role="page" id="page" data-theme="a"><div data-role="header" data-position="fixed" data-theme="a"><h1>互普網管Network Access Control管理系統</h1><a href="javascript:location.reload();" data-role="button" class="ui-btn-right" data-icon="refresh">重新整理</a></div><div data-role="content" id="show1"><p>如有不懂，請加qq群：135430763，共同學習！</p></div><div data-role="content" id="show2" style="display: none;"><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p></div><div data-role="content" id="show3" style="display: none;"><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p></div><div data-role="content" id="show4" style="display: none;"><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p></div><div id="footer" class="nav-style" data-role="footer" data-theme="a" data-position="fixed"><div data-role="navbar"> <ul> <!-- 預設顯示home菜單 --> <li><a href="#" id="nav1" data-icon="home" onclick="fun1();return false;" class="ui-btn-active">One</a></li> <li><a href="#" id="nav2" data-icon="grid" onclick="fun2();return false;">Two</a></li> <li><a href="#" id="nav3" data-icon="search" onclick="fun3();return false;">Three</a></li> <li><a href="#" id="nav4" data-icon="info" onclick="fun4();return false;">Four</a></li> </ul></div></div></div> </body></html>更多功能樣本，請點擊下載：http://download.csdn.net/download/xmt1139057136/7451815
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
