Html + JS ： 點擊對應的按鈕，進行選擇是隱藏還是顯示（用戶回復功能）

　　例如：

　　當我點擊按鈕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）沒有操作之前：

　　

 

　　　　（2）只點擊“按鈕1”之后：

 

　　　　（2）只點擊“按鈕2”之后：

 

　　　 （3）點擊“按鈕1”和“按鈕2”之后：

　　

 

　　　　（4）點擊“按鈕1”兩次，點擊“按鈕2”一次后：

 

 

　　　　疑問：按鈕和內容是怎么關聯起來的？

　　　　回答：

　　　　a標簽 有 onclick 屬性

　　　　里面有 show(0) 這個javascript代碼

　　　　show(0) 就是運行 show() 這個 函數， 然後傳入 0 為參數

 　　　　到目前為止，<a> 和<p> 是沒有關聯的

 　　　　<a> 只知道要在被點擊時運行一個javascript函數

 　　　　和<p>的關聯，全部在函數里面定義

　　　　例如13行就是 用classname獲取所有相關的 <p>，然後14行，在多個<p>中選出了一個，即content = content[num]這一句，所以它們關聯了

 

 　　以上就是我的總結啦，為那位給我解答的朋友致敬致謝！

　　END