Question

您好我正在使用javascript / php / html，目前我正在显示“汽车”的信息，当我点击更多信息时，它会在同一辆车上显示“更多信息”并隐藏汽车标签（所有这些信息都是取自数据库）。

但是现在我正试图让它显示这些信息，但每个“汽车”都有自己的“更多信息”，所以当我点击它时，它只是显示汽车信息在它旁边的“汽车” 。当我点击另一辆车时，它隐藏了之前的进一步信息并显示了新的信息。

这是我如何做到的，但它只是显示链接，链接没有做任何事情......

Javascript：

<html>
<head>
<script type="text/javascript">

function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
            thelist[i].style.display = 'none';
        }
        var e = document.getElementById(id);
        if(e.style.display == 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
    }
//]]>  

</script>
</head>

PHP：

<body>

      <a href="#" onclick="toggle_visibility('list1');">
      <p>Car information</p>
    </a>
    <div id="list1" class="alist" style="display:none;">

<?php

$sql = "SELECT * from Car";
$result = mysql_query ($sql);
while ($details = mysql_fetch_array ($result))
    {
        $display = "<p>";
        $display.= $details["carMake"] . "&nbsp;";
        $display.= $details["carModel"];
        $display.="<a href='#' >More information</a>";
        $display.="</p>";
        echo ($display);
    }
?>
        </div>

    <a href="#" onclick="toggle_visibility('list2');">
      <p>More information</p>
    </a>

    <div id="list2" class="alist" style="display:none;">

<?php

$sql = "SELECT * from Car";
$result = mysql_query ($sql);
while ($details = mysql_fetch_array ($result))
    {
        $display = "<p>";
        $display.= $details["carMileage"];
        $display.= $details["carColour"];
        $display.= $details["carMOT"];
        $display.= "</p>";
        echo ($display);
    }
?>
    </div>
</body>    
</html>

Answer 1

用以下代码替换函数的第一部分：

function toggle_visibility(evt, id) {
    var ev = evt || window.event;
    ev.preventDefault();
    ...
};

这将使链接（<a href="#">）不会尝试加载#页面（也就是当前页面）。还需要更改您的HTML以在该链接上使用它：

<a href="#" onclick="toggle_visibility(event, 'list1');">

或者......你可以让这整个事情变得简单，并使用jQuery。

通过onclick / javascript函数显示其他信息

1 个答案: