Question

我有一个php页面，其中包含一个表格，我只想在点击链接后才能显示。

我的问题如下：我有一个div设置为display =“none”

<div name="details" style="display:none;">

使用javascript，我将其更改为内联表，或者只是阻止，对于这种情况无关紧要。

function showDetails(){
        var elems = document.getElementsByName("details");
        document.getElementById("dis").innerHTML = elems.length;
        for (var i=0; i<elems.length; i++)
            elems[i].style.display = "inline-table";
    }

当我点击触发此脚本的链接时，div内容会显示几分之一秒并再次消失。这是一个视频： http://dl.dropbox.com/u/17289984/SRFile2012_9_9_22_43_58_463.avi

我已经检查了一些5-6页关于更改显示属性的google链接，当然还检查了stackoverflow，但没有找到相关的答案......

有没有人有线索？

提前感谢！

P.S。这是我的完整代码： http://codeviewer.org/view/code:299e

Answer 1

请记住，您正在点击<a>标记，该标记通常用于链接，他们可以将您发送到另一个页面（这正是发生的事情）。您的href属性为空，因此当您单击它时它会刷新页面。

试试这个： <a href="" onclick="showDetails();return false;">show details</a>

注意return false;。这将取消默认操作。

Answer 2

name属性不应该像那样使用（实际上，它已被弃用，除表单字段外不应使用）。将您的代码更改为：

<table class="details">

并使用它来找到它们：

var elems = document.getElementByClassName("details");

此外，在设置显示属性时，您应使用“none”隐藏元素，只使用空字符串将其恢复为浏览器默认值（可以从一个浏览器更改为另一个浏览器）：

elem.style.display = ""; // remove "none" value to make it visible.

旧浏览器中不存在getElementByClassName功能。快速谷歌搜索将找到示例代码，以使其在所有浏览器中工作。

另外，@ Lian是正确的，你应该在onclick中返回false。

Answer 3

您提供的链接中的代码与您在此处发布的内容有所不同。它在其他代码中说，您只能将可见性更改为可见。可见度低于显示优先级。如果可见性可见但显示仍然没有，则意味着该东西仍然是不可见的，因为显示仍然没有。您必须完全忘记可见性，并且只将显示无变为显示块。

将显示属性更改为可见的轻弹并再次消失

3 个答案: