Question

我的页面上有这些标签

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

然后这些标签下面有空格。当用户点击这些选项卡时，必须在该空间中显示与这些选项卡对应的数据，而不更改页面的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。

<强> UPD ： 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标签的例子，你可以看一下。

用PHP标签？

4 个答案: