這里,實(shí)現(xiàn)多標(biāo)簽頁(yè)效果的方法有兩個(gè),一個(gè)是基于DOM的,另一個(gè)是基于jquery的,此次我寫(xiě)的是一個(gè)對(duì)于一個(gè)電話(huà)套餐的不同,顯示不同的標(biāo)簽頁(yè)
方法一:
首先,我們要把頁(yè)面的大體框架和樣式寫(xiě)出來(lái),html和css代碼如下:
<ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" onclick="show(2)">30元套餐</li> <li id="tab3" onclick="show(3)">50元包月</li> </ul> <div id="container"> <div id="content1" style="z-index: 1;"> 10元套餐詳情:<br /> 每月套餐內(nèi)撥打100分鐘,超出部分2毛/分鐘 </div> <div id="content2"> 30元套餐詳情:<br /> 每月套餐內(nèi)撥打300分鐘,超出部分1.5毛/分鐘 </div> <div id="content3"> 50元包月詳情:<br /> 每月無(wú)限量隨心打 </div> </div>
css樣式代碼如下:
*{ margin:0; padding: 0; } #tab li{ float: left; list-style: none; width: 80px; height: 40px; line-height: 40px; cursor: pointer; text-align: center; } #container{ position: relative; } #content1,#content2,#content3{ width: 300px; height: 100px; padding:30px; position: absolute; top: 40px; left: 0; } #tab1,#content1{ background-color: #ffcc00; } #tab2,#content2{ background-color: #ff00cc; } #tab3,#content3{ background-color: #00ccff; }
形成的靜態(tài)界面如下:
現(xiàn)在,開(kāi)始寫(xiě)javascript代碼了,實(shí)現(xiàn)動(dòng)態(tài)效果,點(diǎn)擊哪個(gè)標(biāo)簽,對(duì)應(yīng)的頁(yè)面會(huì)顯示出來(lái),代碼如下:
<script> function show(n){ var curr=document.querySelector("div[style]"); curr.removeAttribute("style"); document.getElementById("content"+n) .style.zIndex="1"; } </script>
頁(yè)面效果如下:
點(diǎn)擊30元套餐,出現(xiàn)的界面:
點(diǎn)擊50元包月的時(shí)候,出現(xiàn)的界面:
方法二:基于jquery,首先我們要在html頁(yè)面的中引入jquery-1.11.3.js文件
html代碼(css樣式代碼同方法一):
<ul id="tab"> <li id="tab1" value="1">10元套餐</li> <li id="tab2" value="2">30元套餐</li> <li id="tab3" value="3">50元包月</li> </ul> <div id="container"> <div id="content1" style="z-index: 1;"> 10元套餐詳情:<br /> 每月套餐內(nèi)撥打100分鐘,超出部分2毛/分鐘 </div> <div id="content2"> 30元套餐詳情:<br /> 每月套餐內(nèi)撥打300分鐘,超出部分1.5毛/分鐘 </div> <div id="content3"> 50元包月詳情:<br /> 每月無(wú)限量隨心打 </div> </div>
js代碼如下:
<script> $("#tab>li").click(function(){ console.log(this); $("#content"+$(this).val()).attr('style','z-index:1').siblings("div").removeAttr("style"); }); </script>
最終實(shí)現(xiàn)的效果同方法一
以上所述是小編給大家介紹的基于jQuery實(shí)現(xiàn)多標(biāo)簽頁(yè)切換的效果(web前端開(kāi)發(fā)),希望對(duì)大家有所幫助,如果大家想離家近更多內(nèi)容敬請(qǐng)關(guān)注綠夏網(wǎng)!