實現的效果：
當點擊某個按鈕的時候，實現點擊A的同時，彈出B的注冊div，使填寫在B信息數據保存下來，點擊B的確定按鈕，B消失，A的圖標往后移動一格，原來的位置為圖標C,點擊C可以彈出來一個鏈接的頁面（頁面鏈接是從B信息里讀取出來的），然后依次類推。。。
1 方法一： 2 $(function(){ 3 4 $(".add1").click(function(){ 5 var div = $("#show1"); 6 if ( div.css("display") === "none" ) { 7 $(".add1").css("opacity",0.4); 8 div.show(); 9 $('input').val(""); 10 $("#show2").css("display","none"); 11 } else { 12 div.hide(); 13 $('input').val(""); 14 } 15 }); 16 17 // 按鈕事件開始 18 $("#button").click(function(){ 19 var num=0; 20 var val1 = $(".input-read1").val(); 21 var val2 = $(".input-read2").val(); 22 $("#show1").css("display","none"); 23 $(".add1").animate({left:'70px',opacity:'1'},"fast"); 24 25 $(".add2").css("display","block"); 26 $.cookie("input-val1", val1, { expires: 0.05}); 27 $.cookie("input-val2", val2, { expires: 0.05 }); 28 29 var MyCookie1 = $.cookie('input-val1'); 30 var MyCookie2 = $.cookie('input-val2'); 31 $(".icon-index").html(MyCookie1+'</br>'+MyCookie2); 32 //第二個隱藏開始 33 $(".add2").click(function(){ 34 var div = $("#show2"); 35 if ( div.css("display") === "none" ) { 36 div.show(); 37 $("#show1").css("display","none"); 38 } else { 39 div.hide(); 40 } 41 $(".if1").attr("src",MyCookie2); 42 43 }); 44 45 // 結束 46 }) 47 }) 48 </script>
但是問題是：沒有辦法繼續往后移動
思路：假使需要4個圖標，設置4個按鈕A,4個B,4個C,控制每點擊一個的樣式，雖然麻煩，但是代碼還是比較繁瑣，需要改進
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 5 <title>jquery的cookie測試</title> 6 <style> 7 </style> 8 </head> 9 <body> 10 <!-- Downloads By http://www.veryhuo.com --> 11 <div class="add1" style="width: 60px; height: 60px; position: absolute;top:0;left: 0; background: url(img/add.png); background-size: cover; cursor: pointer; z-index: 999;"></div> 12 <div class="add2" style="display:none;width: 60px; height: 60px; position: absolute;top:0;left: 70px;background: url(img/add.png); background-size: cover; cursor: pointer; z-index: 999;"></div> 13 <div class="add3" style="display:none;width: 60px; height: 60px; position: absolute;top:0;left: 140px;background: url(img/add.png);background-size: cover; cursor: pointer; z-index: 999;"></div> 14 <div class="add4" style="display:none;width: 60px; height: 60px; position: absolute;top:0;left: 210px;background: url(img/add.png);background-size: cover; cursor: pointer; z-index: 999;"></div> 15 <div class="add5" style="display:none;width: 60px; height: 60px; position: absolute;top:0;left: 280px;background: url(img/add.png);background-size: cover; cursor: pointer; z-index: 999;"></div> 16 <div class="icon-1" style="width: 60px; height: 60px; position: absolute;top:0;left: 0; background: url(img/AddressBook.png); background-size: cover; cursor: pointer; z-index: 999; display: none;"></div> 17 <div class="icon-2" style="width: 60px; height: 60px; position: absolute;top:0;left: 70px; background: url(img/AddressBook.png); background-size: cover; cursor: pointer; z-index: 999; display: none;"></div> 18 <div class="icon-3" style="width: 60px; height: 60px; position: absolute;top:0;left: 140px; background: url(img/AddressBook.png); background-size: cover; cursor: pointer; z-index: 999; display: none;"></div> 19 <div class="icon-4" style="width: 60px; height: 60px; position: absolute;top:0;left: 210px; background: url(img/AddressBook.png); background-size: cover; cursor: pointer; z-index: 999; display: none;"></div> 20 21 22 <div class="show1" style="width:250px;position: absolute;top:70px;left: 10px; background: url(img/bg.jpg);padding:20px;display: none;"> 23 名稱：<input type="text" class="input-read1" placeholder=" your name" onfocus="if (placeholder ==' your name'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your name'}" ><br><br> 24 地址：<input type="text" class="input-read2" placeholder=" your adress" onfocus="if (placeholder ==' your adress'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your adress'}" ><br><br> 25 <button id="button1">確定</button> 26 </div> 27 <div class="show2" style="width:250px;position: absolute;top:70px;left: 50px; background: url(img/bg.jpg);padding:20px;display: none;"> 28 名稱：<input type="text" class="input-read3" placeholder=" your name" onfocus="if (placeholder ==' your name'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your name'}" ><br><br> 29 地址：<input type="text" class="input-read4" placeholder=" your adress" onfocus="if (placeholder ==' your adress'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your adress'}" ><br><br> 30 <button id="button2">確定</button> 31 </div> 32 <div class="show3" style="width:250px;position: absolute;top:70px;left: 50px; background: url(img/bg.jpg);padding:20px;display: none;"> 33 名稱：<input type="text" class="input-read5" placeholder=" your name" onfocus="if (placeholder ==' your name'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your name'}" ><br><br> 34 地址：<input type="text" class="input-read6" placeholder=" your adress" onfocus="if (placeholder ==' your adress'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your adress'}" ><br><br> 35 <button id="button3">確定</button> 36 </div> 37 <div class="show4" style="width:250px;position: absolute;top:70px;left: 50px; background: url(img/bg.jpg);padding:20px;display: none;"> 38 名稱：<input type="text" class="input-read7" placeholder=" your name" onfocus="if (placeholder ==' your name'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your name'}" ><br><br> 39 地址：<input type="text" class="input-read8" placeholder=" your adress" onfocus="if (placeholder ==' your adress'){placeholder =''}" onblur="if (placeholder ==''){placeholder=' your adress'}" ><br><br> 40 <button id="button4">確定</button> 41 </div> 42 <!--隱藏的窗口效果開始出現--> 43 <div id="show1" style="width:700px;height:450px;position: absolute;top:70px;left: 0;display: none; border: 2px solid black;"> 44 <iframe width="99.5%" height="100%" orderr="0" class="if1" src=""></iframe> 45 </div> 46 <div id="show2" style="width:700px;height:450px;position: absolute;top:70px;left: 0;display: none; border: 2px solid black;"> 47 <iframe width="99.5%" height="100%" orderr="0" class="if2" src=""></iframe> 48 </div> 49 <div id="show3" style="width:700px;height:450px;position: absolute;top:70px;left: 0;display: none; border: 2px solid black;"> 50 <iframe width="99.5%" height="100%" orderr="0" class="if3" src=""></iframe> 51 </div> 52 <div id="show4" style="width:700px;height:450px;position: absolute;top:70px;left: 0;display: none; border: 2px solid black;"> 53 <iframe width="99.5%" height="100%" orderr="0" class="if4" src=""></iframe> 54 </div> 55 56 57 <div class="icon-index" style="width: 250px; height: 100px; background: pink; position: absolute;top: 0; right: 0;"></div> 58 <script src="js/jquery.js"></script> 59 <script src="Scripts/jquery.cookie.js"></script> 60 <script> 61 $(function(){ 62 // 第一個!!!: 63 $(".add1").click(function(){ 64 var div = $(".show1"); 65 if ( div.css("display") === "none" ) { 66 $(".add1").css("opacity",0.4); 67 div.show(); 68 $('input').val(""); 69 } else { 70 div.hide(); 71 $('input').val(""); 72 } 73 }); 74 75 // 按鈕事件開始 76 $("#button1").click(function(){ 77 78 var val1 = $(".input-read1").val(); 79 var val2 = $(".input-read2").val(); 80 $.cookie("input-val1", val1, { expires: 0.05}); 81 $.cookie("input-val2", val2, { expires: 0.05 }); 82 83 var MyCookie1 = $.cookie('input-val1'); 84 var MyCookie2 = $.cookie('input-val2'); 85 $(".icon-index").html(MyCookie1+'</br>'+MyCookie2); 86 87 //上面七處為比較重要的代碼
88 if( MyCookie1==""||MyCookie2==""){ 89 alert("信息不能為空哦"); 90 }else{ 91 $(".add1").css("display","none"); 92 $(".icon-1").css("display","block"); 93 $(".show1").css("display","none"); 94 $(".add1").css("opacity",1); 95 $(".add2").css("display","block"); 96 97 98 $(".icon-1").click(function(){ 99 $(".show2").css("display","none"); 100 var div = $("#show1"); 101 if ( div.css("display") === "none" ) { 102 div.show(); 103 } else { 104 div.hide(); 105 } 106 $(".if1").attr("src",MyCookie2); 107 }); 108 } 109 110 }) 111 // 結束 112 113 114 115 // 第二個!!!: 116 $(".add2").click(function(){ 117 var div = $(".show2"); 118 $("#show1").css("display","none"); 119 if ( div.css("display") === "none" ) { 120 $(".add2").css("opacity",0.4); 121 div.show(); 122 // $('input').val(""); 123 } else { 124 div.hide(); 125 // $('input').val(""); 126 } 127 }); 128 // 按鈕事件開始 129 $("#button2").click(function(){ 130 var val3 = $(".input-read3").val(); 131 var val4 = $(".input-read4").val(); 132 133 $.cookie("input-val3", val3, { expires: 0.05}); 134 $.cookie("input-val4", val4, { expires: 0.05 }); 135 136 var MyCookie3 = $.cookie('input-val3'); 137 var MyCookie4 = $.cookie('input-val4'); 138 $(".icon-index").html(MyCookie3+'</br>'+MyCookie4); 139 140 141 $(".add2").css("display","none"); 142 $(".icon-2").css("display","block"); 143 $(".show2").css("display","none"); 144 $(".add2").css("opacity",1); 145 $(".add3").css("display","block"); 146 147 $(".icon-2").click(function(){ 148 $(".show3").css("display","none"); 149 var div = $("#show2"); 150 if ( div.css("display") === "none" ) { 151 div.show(); 152 } else { 153 div.hide(); 154 } 155 $(".if2").attr("src",MyCookie4); 156 }); 157 }) 158 // 結束 159 160 // 第三個!!!: 161 。。。。。。 162 165 // 第四個!!!: 166 。。。。。。 167 // 第五個!!!: 168 $(".add5").click(function(){ 169 $(".add5").css("opacity",0.4); 170 $("#show1").css("display","none"); 171 $("#show2").css("display","none"); 172 $("#show3").css("display","none"); 173 $("#show4").css("display","none"); 174 alert("已達上限"); 175 }); 176 }) 177 </script> 178 179 </body> 180 </html>