如何更改图片和文本内容？

要更改图片和文本内容，你需要修改HTML文件中对应id的元素内容。例如，如果你想更改第1个按钮的内容为新的图片和文本，可以这样做：

<div id="content1" class="content active">
    <img src="new-image1.jpg" alt="新图片1"> 新的文字1 <br> 新的图标1
</div>

同样地，如果你有多组需要动态更新的内容，可以在JavaScript里维护一个对象，键为索引值，值为新的图片路径、文本和图标信息，然后在`showContent`函数中根据需要替换。

let contentData = {
    1: { imgSrc: 'new-image1.jpg', text: '新文字1', icon: '新的图标1' },
    2: { ... },
    // 其他按钮的数据...
};

function showContent(index) {
    if (index in contentData) {
        let newData = contentData[index];
        document.getElementById(`content${index}`).querySelector('img').src = newData.imgSrc;
        document.getElementById(`content${index}`).textContent = newData.text;
        document.getElementById(`content${index}`).querySelector('.icon')?.innerText = newData.icon;
    }
}

这样每次更改数据时，只需要更新`contentData`对象即可，不需要改动HTML结构。