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文件中，您可以检查网址中的方法参数，以确定要返回的内容。

我的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);

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

3 个答案: