根据点击链接更改隐藏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);