在 PHP 中跳转？

Question

我的页面上有这些标签

Equ |税务 |平衡 |债务 |基金 | ETF |镀金.......

然后在这些选项卡下方有空间。当用户单击这些选项卡时，必须在该空间中显示与这些选项卡对应的数据，而无需更改页面的 url。就像当我单击 Equ 时，其数据将显示在该空间中，如果我单击税则其数据将显示在相同的空间中，就好像它已经覆盖了以前的数据一样。必须显示的数据是使用 php 计算的。 现在使用 php 或 javascript 最简单的方法是什么？？？

这里将不胜感激一些编码帮助。

编辑： 看到我知道这可以使用 javascript 来完成，但是必须显示的数据在 php 变量中。现在如何将 php 变量分配给 javascript????

<script type="text/javascript">
function showhide(ref)
{
    document.getElementById('mf').innerHTML= HERE I WANT A PHP VARIABLE;
}
</script>

如何在 onclick 事件中发送我的 pfp 变量，以便它们可以在函数中使用？？？

Answer 1

您可以使用 CSS 或/和 Javascript 来帮助您解决问题。

仅使用 CSS 的选项卡示例：

http://edeverett.co.uk/experiments/css_only_tabs.html

使用 Javascript 的选项卡示例：

http://jqueryui.com/demos/tabs/

编辑 作为对您的编辑的回复：

编辑：我知道这可以使用 javascript 来完成，但必须显示的数据在 php 变量中。现在如何将 php 变量分配给 javascript????

要在服务器端同步执行所有操作，您可以将计算结果注入您的 javascript：

function showhide(ref)
{
    document.getElementById('mf').innerHTML= '<?php echo $variable; ?>';
}

更好的做法是使用 AJAX。

Answer 2

其实很简单。您不需要在标签点击时动态加载数据。您可以在页面加载时一次性加载所有数据，然后根据需要显示/隐藏。

一个简单的例子...

<ul id="#nav">
<li><a href="#" id="equ-tab">equ</a></li>
<li><a href="#" id="tax-tab">tax</a></li>
<li><a href="#" id="bal-tab">balanced</a></li>
</ul>

<div id="content">
    <div id="content-equ">equ content</div>
    <div id="content-tax">tax content</div>
    <div id="content-bal">balanced content</div>
</div>

假设 equ 是默认内容。当页面加载时隐藏除 equ 之外的所有其他 div（使用 css 或最好是 javascript）

在单击选项卡时使用 javascript（推荐使用 jquery）隐藏所有内容，然后显示该选项卡内容。

$('#nav a').click(function(){ // when a nav link is clicked
    $('#content div').hide(); // hide all content
    $('#content #content-'+$(this).attr('id')).show(); // show content that has id #content-<tabID>
});

代码不是复制粘贴的，我是快速打出来的例子

Answer 3

你必须使用ajax

您可以使用一些库，例如 xajax、mootools 或 jquery。

更新： mootools 示例： 首先创建单独的 php 文件，根据 tab(createContent.php) 返回文本 然后在javascript中：

function menuClick(var i)
{
    var request1 = new Request.HTML({ url: 'createContent.php?i='+i,
        onSuccess: function(html) {
            $('div1').set('text', '');
            $('div1').adopt(html);
            $('div1').innerHTML = '';
        },
        onFailure: function() {
            $('div1').set('text', '');
            $('div1').innerHTML = '';
        }
    });

    request1.send();
    return false;
}

在 html 中为具有该功能的选项卡添加 onclick：

<a href="#" onclick="return menuClick(1);">EQU</a>

Answer 4

显示行为将是客户端的事情，因为它是发生在浏览器上的事情（某些逻辑）。如前所述，您必须使用 javascript/css 来执行此操作。

在编码帮助方面，您可能会发现这很有帮助： http://stilbuero.de/jquery/tabs_3/

编辑

所以，如果你想把一个 php 变量放在那里，这就是你要做的，并把它变成一个“.php”页面：

<script type="text/javascript">
function showhide(ref)
{
    document.getElementById('mf').innerHTML= <?php echo $VAR ?>;
}
</script>

当然，这假设您在呈现页面之前计算了变量。如果变量的值取决于页面上的某些操作（例如，在文本框中输入一些文本并单击按钮后 - 就像搜索框），您将不得不为此使用 AJAX。您可以通过对 php 页面执行 POST 请求的 GET 请求，然后显示该页面的内容来做到这一点。我在上面发布的链接有一个 AJAX 选项卡的示例，你可以看看。