点击按钮显示div并向div中传递参数
生活随笔
收集整理的這篇文章主要介紹了
点击按钮显示div并向div中传递参数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?針對菜單顯示的內容，點擊每一個按鈕后，需要顯示詳細信息，詳情頁是一個div,點擊一行才會顯示，顯示的內容則是根據選中的按鈕。
引申出來，比如一個訂單列表，點擊一行，則彈出一個div展示訂單詳情，而詳情內容則是根據點擊的那一行的內容來確定，于是需要傳遞參數。
實現效果如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>根據點擊按鈕的不同顯示不同的相同的div并傳遞參數</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">藍色</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");//當元素被點擊的時候，把其他元素的id刪除掉，再把當前點擊的元素加上一個idbtn.click(function(){btn.removeAttr("id")$(this).attr("id","a")switch ($("#a").text()){case "紅色":viewdiv($("#a").text(),1000,500,"red");break;case "藍色":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>?
總結
以上是生活随笔為你收集整理的点击按钮显示div并向div中传递参数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： d3.js实现隐藏部分关系
- 下一篇： html中嵌入iframe进行父子页面参