JS实现点击链接切换显示隐藏内容的方法

当我们需要将网页中的内容显示和隐藏时，我们可以使用JavaScript来实现。具体的实现方式有多种，下面是两种使用JS实现点击链接切换显示隐藏内容的方法：

一、使用display属性

1. 为需要隐藏或显示的内容添加一个id属性

<p id="content1">这是需要显示和隐藏的内容</p>

1. 在CSS中设置默认样式

#content1 {
    display: none;
}

1. 在JavaScript中为链接添加一个点击事件，点击链接时修改display属性

// 获取链接元素
var link = document.getElementById('link1');
// 获取内容元素
var content = document.getElementById('content1');
// 添加点击事件
link.onclick = function() {
    // 判断内容是否显示
    if(content.style.display == 'none') {
        // 显示内容
        content.style.display = 'block';
    } else {
        // 隐藏内容
        content.style.display = 'none';
    }
}

二、使用classList属性

1. 为需要隐藏或显示的内容添加一个class属性

<p class="content2">这是需要显示和隐藏的内容</p>

1. 在CSS中设置默认样式

.content2 {
    display: none;
}

1. 在JavaScript中为链接添加一个点击事件，点击链接时修改classList属性

// 获取链接元素
var link = document.getElementById('link2');
// 获取内容元素
var content = document.querySelector('.content2');
// 添加点击事件
link.onclick = function() {
    // 判断内容是否显示
    if(content.classList.contains('show')) {
        // 隐藏内容
        content.classList.remove('show');
    } else {
        // 显示内容
        content.classList.add('show');
    }
}

以上就是两种使用JavaScript实现点击链接切换显示隐藏内容的方法。需要注意的是，这里的示例只是基础实现，还可以根据具体需求对样式和交互进行优化。