js实现点击高亮显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Highlight Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul id="itemList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

#itemList li {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    cursor: pointer;
}

#itemList li.highlight {
    background-color: #ffcc00;
}

document.addEventListener('DOMContentLoaded', function() {
    const items = document.querySelectorAll('#itemList li');

    items.forEach(item => {
        item.addEventListener('click', function() {
            // Remove highlight from all items
            items.forEach(el => el.classList.remove('highlight'));
            // Add highlight to the clicked item
            this.classList.add('highlight');
        });
    });
});