如何在单击时显示特定标记，并隐藏div中存在的另一个标记？

要在单击时显示特定标记并隐藏div中存在的另一个标记，可以使用JavaScript来操作DOM元素的显示和隐藏。以下是一个简单的示例，展示了如何实现这一功能。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Markers</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="container">
        <span id="marker1">Marker 1</span>
        <span id="marker2" class="hidden">Marker 2</span>
    </div>
    <button id="toggleButton">Toggle Markers</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript代码（script.js）

document.getElementById('toggleButton').addEventListener('click', function() {
    var marker1 = document.getElementById('marker1');
    var marker2 = document.getElementById('marker2');

    if (marker1.classList.contains('hidden')) {
        marker1.classList.remove('hidden');
        marker2.classList.add('hidden');
    } else {
        marker1.classList.add('hidden');
        marker2.classList.remove('hidden');
    }
});

解释

HTML结构：
- 创建一个包含两个span元素的div，分别代表两个标记。
- 初始状态下，marker2是隐藏的（通过添加hidden类）。
- 添加一个按钮用于触发标记的切换。

CSS样式：
- 定义一个.hidden类，用于隐藏元素。
JavaScript代码：
- 使用addEventListener为按钮添加点击事件监听器。
- 在点击事件处理函数中，检查marker1是否包含hidden类。
- 如果marker1是隐藏的，则显示marker1并隐藏marker2；反之亦然。