帶按鈕點擊內容的加載div

我想根據按鈕加載一些div與jquery。例如，我們有帶按鈕點擊內容的加載div

<div class="content"> 
    <button type="button" name="addteam">Add New Team</button> 
    <button type="button" name="addplayer">Add New Player</button> 
    <button type="button" name="addgame">Add New Game</button> 
    <button type="button" name="deleteteam">Delete Team</button> 
    <button type="button" name="deleteplayer">Delete Player</button> 
    <button type="button" name="deletegame">Delete Game</button> 
    <button type="button" name="addplayermatch">Add Player To Match</button> 
    <button type="button" name="deleteplayermatch">Remove Player From Match</button> 
</div>

現在，如果用戶點擊說Add New Player我希望它顯示

<div class="addnewplayer"> 
    <h2>Add New Player</h2> 
    <form action="addplayer.php" method="POST"/> 
     <p>Name: <input type="text" name="name" /></p> 
     <p>Sex: <input type="text" name="sex" /></p> 
     <p>Email: <input type="text" name="email" /></p> 
     <p>Birth: <input type="text" name="birth" /></p> 
     <p>League: <input type="text" name="league" /></p> 
     <p>Team: <select name="teamName" class="addPTeam"><script>fillTeams();</script></select></p> 
     <input type="submit" value="Submit" /> 
    </form> 
</div>

我拿起jQuery的這個星期。我知道我可以爲每個按鈕創建一個onClick函數，但足夠明智嗎？然後使用$(".addnewplayer").html(....並將整個div信息放在那裏？

如果你能指出最好的方法來做到這一點。

謝謝

來源

2014-01-14 LefterisL

有每個div都隱藏，只顯示或隱藏點擊 – mplungjan

你必須爲每個不同的形式（如你可以使用Ajax，這樣的股利將每一次動態加載..添加新團隊，添加新玩家等）？ – RaviRokkam

是的，每個人都有不同的 – LefterisL

我會考慮這個問題：

Live Demo

<head> 
<style> 
.content { display:none } 
</style> 
<script src="jquery.js"></script> 
<script> 
$(function() { 
    $(".but").on("click",function(e) { 
    e.preventDefault(); 
    $(".content").hide(); 
    $("#"+this.id+"div").show(); 
    }); 
}); 
</script> 
</head> 
<body> 

<div class="navigation"> 
    <button class="but" type="button" id="addteam">Add New Team</button> 
    <button class="but" type="button" id="addplayer">Add New Player</button> 
    <button class="but" type="button" id="addgame">Add New Game</button> 
    <button class="but" type="button" id="deleteteam">Delete Team</button> 
    <button class="but" type="button" id="deleteplayer">Delete Player</button> 
    <button class="but" type="button" id="deletegame">Delete Game</button> 
    <button class="but" type="button" id="addplayermatch">Add Player To Match</button> 
    <button class="but" type="button" id="deleteplayermatch">Remove Player From Match</button> 
</div> 

<div id="addplayerdiv" class="content"> 
    <h2>Add New Player</h2> 
    <form ...> 
    </form> 
</div> 
<div id="addteamdiv" class="content"> 
    <h2>Add New Team</h2> 
    <form ...> 
    </form> 
</div> 
</body>

如果HTML是廣泛的，你可以加載一個HTML文件中的內容：

$(function() { 
    $(".but").on("click",function(e) { 
    e.preventDefault(); 
    $("#content").load(this.id+".html"); 
    }); 
});

來源

2014-01-14 10:25:01 mplungjan

你先生，你是男人！ – LefterisL

您可以使用HTML模板爲每個按鍵內容的指定內容，然後像做

你可以做soemthing像

<div class="content"> 
    <button type="button" name="addteam" data-href="addteam.html">Add New Team</button> 
    <button type="button" name="addplayer" data-href="addplayer.html">Add New Player</button> 
    <button type="button" name="addgame" data-href="addgame.html">Add New Game</button> 
    .... 
</div>

然後

//target all buttons elements with data-href property 
$('button[data-href]').click(function() { 
    //load the contents of the url specified by the href into addnewplayer 
    $(".addnewplayer").load($(this).data('href')); 
})

然後在addteam.html

<div> 
    ... 
</div>

來源

2014-01-14 10:19:08

看起來不錯。我會跟着這個。謝謝 – LefterisL

考慮隱藏div的，而不是裝載它們：

<div class="content"> 
<button type="button" name="addteam">Add New Team</button> 
<button type="button" name="addplayer">Add New Player</button> 
<button type="button" name="addgame">Add New Game</button> 
<button type="button" name="deleteteam">Delete Team</button> 
<button type="button" name="deleteplayer">Delete Player</button> 
<button type="button" name="deletegame">Delete Game</button> 
<button type="button" name="addplayermatch">Add Player To Match</button> 
<button type="button" name="deleteplayermatch">Remove Player From Match</button> 
</div> 
... 
<div id="addplayer" class="panel"> 
<h2>Add New Player</h2> 
<form action="addplayer.php" method="POST"/> 
<p>Name: <input type="text" name="name" /></p> 
<p>Sex: <input type="text" name="sex" /></p> 
<p>Email: <input type="text" name="email" /></p> 
<p>Birth: <input type="text" name="birth" /></p> 
<p>League: <input type="text" name="league" /></p> 
<p>Team: <select name="teamName" class="addPTeam"><script>fillTeams();</script></select></p> 
<input type="submit" value="Submit" /> 
</form> 
</div>

CSS：

.panel { 
    display: none; 
} 

.panel.current { 
    display: block; 
}

的JavaScript：

$(".content").on("click", "button", function() { 
    var name = $(this).attr("name"); 
    $(".panel").removeClass("current"); 
    $("div#" + name).addClass("current"); 
});

來源

2014-01-14 10:22:43

我會建議顯示/隱藏選項example

$(function(){ 
    $('button').click(function(event){ 
     var name = $(this).attr("name"); 
     $("#" + name + "div").slideToggle("slow"); 
    }) 
});

在這個例子中，你在div內創建一個表單並將其放在按鈕之後。 div id需要是按鈕名稱+「div」。然後該函數知道哪個div切換。

來源

2014-01-14 10:25:55

當你點擊按鈕

<div class="content"> 
    <button type="button" name="addteam" onclick="onshow()>Add New Team</button> 
    <button type="button" name="addplayer">Add New Player</button> 
    <button type="button" name="addgame">Add New Game</button> 
    <button type="button" name="deleteteam">Delete Team</button> 
    <button type="button" name="deleteplayer">Delete Player</button> 
    <button type="button" name="deletegame">Delete Game</button> 
    <button type="button" name="addplayermatch">Add Player To Match</button> 
    <button type="button" name="deleteplayermatch">Remove Player From Match</button> 
</div> 
    <div class="addnewplayer"> 

</div> 
    <script language="javascript"> 

     function onshow() 
     { 

     $.ajax({ 
      type:'POST' 
      url:context+'/newteam', 
      success:function(data) { 
       $("div.addnewplayer").html(data); 


      } 

      }); 

     } 



    then in newteam.html 

<div class="addnewplayer"> 
    <h2>Add New Player</h2> 
    <form action="addplayer.php" method="POST"/> 
     <p>Name: <input type="text" name="name" /></p> 
     <p>Sex: <input type="text" name="sex" /></p> 
     <p>Email: <input type="text" name="email" /></p> 
     <p>Birth: <input type="text" name="birth" /></p> 
     <p>League: <input type="text" name="league" /></p> 
     <p>Team: <select name="teamName" class="addPTeam"><script>fillTeams();</script></select></p> 
     <input type="submit" value="Submit" /> 
    </form> 
</div>

來源

2014-01-14 10:28:57 Lijo

爲什麼發佈？爲什麼不只是$（「＃content」）。load（...）？ – mplungjan

帶按鈕點擊內容的加載div

回答

相關問題