根據點擊鏈接更改隱藏div的內容

Question

我正在構建一個網站，管理員可以在其中爲網站進行設置。我希望管理員設置頁面具有與網站其他部分類似的「感覺」，該網站有一些漂亮的jQuery功能。

在管理網站上有一個隱藏的div，當點擊六個鏈接中的一個時顯示。我希望隱藏的div的內容在顯示之前更改內容。我不知道如何做到這一點。我可以爲頁面上的每個鏈接設置一個div框。但這變得非常麻煩，因爲我需要重複我的CSS和jQuery的每一個環節。我想這可以通過一些javascript/jquery代碼完成，它可以確定哪個鏈接是點擊，然後決定在隱藏div內調用哪個php函數。然後，PHP可以「回顯」div的內容，然後可以顯示。

怎麼能這樣做？

我的HTML/jQuery代碼如下：

---的HTML鏈接---

<table id="settings"> 
<tr>  
<td> 
<a href="#" class="action"><img src="images/folder.gif" alt="" height="100"/></a> 
</td> 

<td> 
<a href="#" class="action"><img src="images/folder.gif" alt="" height="100"/></a> 
</td> 
<td> 
<a href="#" class="action"><img src="images/folder.gif" alt="" height="100"/></a> 
</td> 

-----隱藏DIV -----

<div id="dashboard_box"> 
<div class="dashboard_inside"> 
    <form action="#" method="post"> 
     <p style="font-size:20px; font-weight: bold;">Change color</p> 
     </br> 
     <fieldset> 

      <? load_content1();?> 

     </fieldset> 
    </form> 
</div> 
</div> 

---- jQuery代碼（工作）----

var mouse_is_inside = false; 

$(document).ready(function() { 
$(".action").click(function() { 
    var loginBox = $("#dashboard_box"); 
    if (loginBox.is(":visible")) 
     loginBox.fadeOut("fast"); 
    else 
     loginBox.fadeIn("fast"); 
    return false; 
}); 

$("#dashboard_box").hover(function(){ 
    mouse_is_inside=true; 
}, function(){ 
    mouse_is_inside=false; 
}); 

$("body").click(function(){ 
    if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast"); 
}); 


}); 

Answer 1

您可能想要使用ajax從服務器加載內容。在jQuery的.load看一看（）方法：http://api.jquery.com/load/

您可以包括每個鏈路上的數據屬性：

<a class="action" data-content="content.php?method=load_content1"></a> 
<a class="action" data-content="content.php?method=load_content2"></a> 

JS會是這個樣子：

$(".action").on('click', function() {  
    $("#dashboard_box fieldset").load($(this).data('content'), function() { 
     var loginBox = $("#dashboard_box"); 
     if (loginBox.is(":visible")) 
     loginBox.fadeOut("fast"); 
     else 
     loginBox.fadeIn("fast"); 
    } 
    return false; 

}); 

然後，在你content.php文件中，您可以檢查url中的方法參數以確定要返回的內容。

我的PHP是一個有點生疏，但這樣的事情：

<? 
    call_user_func($_GET['method']); // i'm not sure how safe this is. you may want to be more explicit 
?> 

Answer 2

你ç一個只是在每個數據添加屬性您的鏈接的

<a href="#" data-url="content1.php" .. 

然後在任意的a你可以得到PHP被稱爲點擊。

$('a').on('click',function(){ 
    var phpFunctionToCall = $(this).data('url'); 
}); 

你可能需要進行Ajax調用的內容加載到您的字段集作爲該<? load_content1();?>在服務器上運行的和JavaScript有沒有對其進行控制。

Answer 3

感謝所有幫助。這是我最終做的。

--- HTML ---

<a class="action" data-content="content.php?method=load_content2"></a> 

--- jQuery的---

var mouse_is_inside = false; 

$(document).ready(function() { 

$(".action").click(function() { 

    var phpFunctionToCall = $(this).data('content'); 
    $('#indhold').load(phpFunctionToCall); 

    var loginBox = $("#dashboard_box"); 
    if (loginBox.is(":visible")) 
     loginBox.fadeOut("fast"); 
    else 
     loginBox.fadeIn("fast"); 
    return false; 



}); 

$("#dashboard_box").hover(function(){ 
    mouse_is_inside=true; 
}, function(){ 
    mouse_is_inside=false; 
}); 

$("body").click(function(){ 
    if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast"); 
}); 

}); 

--- PHP（縮短）---

function load_settings_panel($settingOnRequest) { 

return $settingOnRequest; 

} 

$result = call_user_func('load_settings_panel', $_GET['method']); 
echo($result);