用html编写 循环显示数组,实现单击某一项内容,该项字体加粗效果。-->
时间: 2024-10-09 11:05:19 浏览: 30
javascript-hello-world:单击一个按钮时显示“ Hello World”消息的示例JavaScript
在HTML中,你可以使用`<ul>`标签创建一个无序列表,并结合JavaScript来实现在用户点击列表项时改变文本样式。下面是一个基本的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.bold-text {
font-weight: bold;
}
</style>
</head>
<body>
<ul id="listItems" onclick="highlightItem(event)">
<!-- 这里通过JavaScript动态生成数组元素 -->
<% for (var i = 0; i < yourArray.length; i++) { %>
<li><a href="#" class="no-bold" data-index="<%= i %>"><%= yourArray[i] %></a></li>
<% } %>
</ul>
<script>
function highlightItem(event) {
// 阻止默认事件,防止跳转链接
event.preventDefault();
// 获取点击的元素及其索引
var element = event.target;
var index = parseInt(element.getAttribute('data-index'));
// 判断是否为已添加样式的元素
if (!element.classList.contains('bold-text')) {
// 如果不是,将对应项加粗并添加样式
document.getElementById('listItems').getElementsByTagName('li')[index].querySelector('.no-bold').classList.add('bold-text');
} else {
// 如果已经加粗,移除样式
element.classList.remove('bold-text');
}
}
</script>
</body>
</html>
```
在这个例子中,`yourArray`是你想循环显示的数组,`highlightItem`函数会在用户点击列表项时被触发。我们首先阻止了`<a>`标签的默认行为,然后获取点击的元素以及其对应的索引,根据需要切换`font-weight`属性。
阅读全文