实现以下页面效果: 1.实现点击上方的城市超链接,把城市名加入下方的列表中 2.当城市再次被点中时,将列表中该城市名移到第一位
时间: 2024-03-03 09:47:06 浏览: 20
好的,这个页面效果可以通过以下 HTML、CSS 和 JavaScript 代码来实现:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>城市列表</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
font-size: 24px;
margin-bottom: 16px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding: 8px;
margin-bottom: 4px;
border: 1px solid #ccc;
cursor: pointer;
}
li:hover {
background-color: #f5f5f5;
}
.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>请选择城市:</h1>
<div>
<a href="#" class="city-link" data-city="北京">北京</a>
<a href="#" class="city-link" data-city="上海">上海</a>
<a href="#" class="city-link" data-city="广州">广州</a>
<a href="#" class="city-link" data-city="深圳">深圳</a>
<a href="#" class="city-link" data-city="杭州">杭州</a>
</div>
<h1>已选城市:</h1>
<ul id="selected-cities">
</ul>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
body {
font-family: Arial, sans-serif;
}
h1 {
font-size: 24px;
margin-bottom: 16px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding: 8px;
margin-bottom: 4px;
border: 1px solid #ccc;
cursor: pointer;
}
li:hover {
background-color: #f5f5f5;
}
.active {
background-color: #4CAF50;
color: white;
}
```
JavaScript 代码:
```javascript
const cityLinks = document.querySelectorAll('.city-link');
const selectedCities = document.getElementById('selected-cities');
// 点击城市链接时的处理函数
function handleCityLinkClick(event) {
event.preventDefault(); // 阻止默认链接跳转行为
const cityName = event.target.dataset.city;
const selectedCity = document.querySelector(`#selected-cities li[data-city="${cityName}"]`);
// 如果该城市已经在列表中,将其移到第一位
if (selectedCity) {
selectedCities.removeChild(selectedCity);
selectedCities.insertBefore(selectedCity, selectedCities.firstChild);
} else {
// 如果该城市不在列表中,将其添加到第一位
const li = document.createElement('li');
li.textContent = cityName;
li.dataset.city = cityName;
li.addEventListener('click', handleSelectedCityClick);
selectedCities.insertBefore(li, selectedCities.firstChild);
}
}
// 点击已选城市时的处理函数
function handleSelectedCityClick(event) {
event.preventDefault(); // 阻止默认链接跳转行为
selectedCities.removeChild(event.target);
}
// 为所有城市链接添加点击事件处理函数
for (const link of cityLinks) {
link.addEventListener('click', handleCityLinkClick);
}
```
这个页面的核心是 JavaScript 代码,其中:
1. `const cityLinks = document.querySelectorAll('.city-link');` 获取所有城市链接的 DOM 元素。
2. `function handleCityLinkClick(event) { ... }` 是点击城市链接时的处理函数,它会根据链接上的 data-city 属性获取城市名,并检查该城市是否已经在列表中。如果已经在列表中,则将其移到第一位;如果不在列表中,则添加到第一位。同时,每个已选城市的 li 元素上都绑定了一个点击事件处理函数 `handleSelectedCityClick`,点击时会将该城市从列表中移除。
3. `for (const link of cityLinks) { ... }` 循环遍历所有城市链接,并将 `handleCityLinkClick` 函数绑定到每个链接的点击事件上。
这样,当用户点击城市链接时,就会触发 `handleCityLinkClick` 函数,实现将城市添加到已选列表中,并在列表中移动城市的功能。