PHP 中的 Tab 键操作？

Question

我的页面上有这些类型的选项卡

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

然后这些选项卡下面有空间。当用户单击这些选项卡时，与这些选项卡相对应的数据必须显示在该空间中，而不更改页面的 url。就像当我单击 Equ 时，其数据将显示在该空间中，如果我单击 Tax，则其数据将显示在该空间中将显示在同一空间中，就好像它已覆盖以前的数据一样。必须显示的数据是使用 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 是默认内容。当页面加载时，

使用 javascript（推荐使用 jquery）隐藏除 equ 之外的所有其他 div（使用 css 或最好是 javascript）。单击选项卡时隐藏所有内容，然后显示该选项卡内容。

$('#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 文件，根据选项卡返回文本(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 页面执行 GET 请求或 POST 请求来实现此目的，然后显示该页面的内容。我上面发布的链接有一个 AJAX 选项卡的示例，您可以看一下。