根据单击的链接更改隐藏 div 的内容

Question

我正在构建一个网站，管理员可以在该网站上进行设置。我希望管理设置页面与网站的其他部分有类似的“感觉”，它有一些漂亮的 jQuery 功能。

在管理站点上有一个隐藏的 div，当点击六个链接之一时会显示该 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);