這里，實現多標簽頁效果的方法有兩個，一個是基于DOM的，另一個是基于jquery的，此次我寫的是一個對于一個電話套餐的不同，顯示不同的標簽頁
方法一：
首先，我們要把頁面的大體框架和樣式寫出來，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 /> 每月套餐內撥打100分鐘，超出部分2毛/分鐘</div><div id="content2">30元套餐詳情：<br /> 每月套餐內撥打300分鐘，超出部分1.5毛/分鐘</div><div id="content3">50元包月詳情：<br /> 每月無限量隨心打</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;}形成的靜態界面如下：
現在，開始寫javascript代碼了，實現動態效果，點擊哪個標簽，對應的頁面會顯示出來，代碼如下：
<script>function show(n){var curr=document.querySelector("div[style]");curr.removeAttribute("style");document.getElementById("content"+n).style.zIndex="1";}</script>頁面效果如下：
點擊30元套餐，出現的界面：
點擊50元包月的時候，出現的界面：
方法二：基于jquery，首先我們要在html頁面的中引入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 /> 每月套餐內撥打100分鐘，超出部分2毛/分鐘</div><div id="content2">30元套餐詳情：<br /> 每月套餐內撥打300分鐘，超出部分1.5毛/分鐘</div><div id="content3">50元包月詳情：<br /> 每月無限量隨心打</div></div>
js代碼如下：
<script>$("#tab>li").click(function(){console.log(this);$("#content"+$(this).val()).attr('style','z-index:1').siblings("div").removeAttr("style");});</script>最終實現的效果同方法一
以上所述是小編給大家介紹的基于jQuery實現多標簽頁切換的效果(web前端開發)，希望對大家有所幫助，如果大家想離家近更多內容敬請關注武林網！
新聞熱點
疑難解答
