Html + JS ：点击对应的按钮，进行选择是隐藏还是显示（用户回复功能）

2022-11-10 15:19:35

　　例如：

　　当我点击按钮1时，点击第一下进行显示This is comment 01，点击第二下隐藏This is comment 01

　　当我点击按钮2时，点击第一下进行显示This is comment 02，点击第二下隐藏This is comment 02

　　当我点击按钮3时，点击第一下进行显示This is comment 03，点击第二下隐藏This is comment 03

　　注意：不同的按钮点击也会显示不同的数据

　　使用场景：根据不同的留言信息，点击“回复”按钮，弹出对应的回复框

　　实例：

　　　　代码：

<a href="javascript:" onclick="show(0)">01</a>

<p class="content3" style="display: none"> This is comment 01</p>

<a href="javascript:" onclick="show(1)">02</a>

<p class="content3" style="display: none"> This is comment 02</p>

<a href="javascript:" onclick="show(2)">03</a>

<p class="content3" style="display: none"> This is comment 03</p>

<script>

function show(num){

    var content = document.getElementsByClassName('content3'); // getElementsByClassName得到的是数组形式

    content = content[num]; // 得到数组的其中一成员，返回一个对象（p标签元素）

    // 如果对象中的diplay状态为none

    if (content.style.display=="none") {

        // 将该对象的diplay属性修改为block进行显示

        content.style.display="block";

    } else{

        // 否则修改为none进行隐藏

        content.style.display="none";

    }

    //console.log(content);

}

</script>

　　　　效果：

　　　　（1）没有操作之前：