点击按钮显示div并向div中传递参数
生活随笔
收集整理的這篇文章主要介紹了
点击按钮显示div并向div中传递参数
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?針對(duì)菜單顯示的內(nèi)容，點(diǎn)擊每一個(gè)按鈕后，需要顯示詳細(xì)信息，詳情頁(yè)是一個(gè)div,點(diǎn)擊一行才會(huì)顯示，顯示的內(nèi)容則是根據(jù)選中的按鈕。
引申出來(lái)，比如一個(gè)訂單列表，點(diǎn)擊一行，則彈出一個(gè)div展示訂單詳情，而詳情內(nèi)容則是根據(jù)點(diǎn)擊的那一行的內(nèi)容來(lái)確定，于是需要傳遞參數(shù)。
實(shí)現(xiàn)效果如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>根據(jù)點(diǎn)擊按鈕的不同顯示不同的相同的div并傳遞參數(shù)</title><script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script></head><body><button id="" class="a" value="a1">紅色</button><button id="" class="a" value="a2">藍(lán)色</button><button id="" class="a" value="a3">粉色</button><button id="" class="a" value="a4">紫色</button><div id = "dis" class="dis" style="width: 200px;height: 200px;display: none;"><p id="p">玩命加載中。。。。</p></div></body><script type="text/javascript">window.onload = function () {//獲取class="a"的所有元素var btn = $(".a");//當(dāng)元素被點(diǎn)擊的時(shí)候，把其他元素的id刪除掉，再把當(dāng)前點(diǎn)擊的元素加上一個(gè)idbtn.click(function(){btn.removeAttr("id")$(this).attr("id","a")switch ($("#a").text()){case "紅色":viewdiv($("#a").text(),1000,500,"red");break;case "藍(lán)色":viewdiv($("#a").text(),1000,500,"blue");break;case "粉色":viewdiv($("#a").text(),1000,500,"pink");break;case "紫色":viewdiv($("#a").text(),1000,500,"#a34bda");break;default:break;}})function viewdiv(s,width,height,background){$("#dis").css("background",background);$("#dis").css("width",width);$("#dis").css("height",height);$("#dis").css("height",height);$("#dis").fadeIn("slow")$("#dis #p").text("歡迎 "+s+" 按鈕");}}</script> </html>?
總結(jié)
以上是生活随笔為你收集整理的点击按钮显示div并向div中传递参数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： d3.js实现隐藏部分关系
- 下一篇： html中嵌入iframe进行父子页面参