我是 css + html 的新手，正在编写我的第一个网站。我在 div 中设置了一个导航菜单，但我想在用户单击其中的某个项目(文本)时将单击文本的字体粗细从较浅更改为粗体。你能告诉我怎么做吗？
到目前为止，这是我的代码:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
</head>
<body>
<div id="background" />
<div id="navigation" class="navigationPlaceholder">
<div id="navigationText">
<ul>
iOS
Blog
About
Contact
</ul>
</div>
</div>
</body>
</html>
最佳答案
您需要为每个导航项添加一个点击事件监听器并更改其 font-weight风格。
首先，首先为您的导航使用无序列表
<div id="navigationText">
<ul>
<li>iOS</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
然后，将此脚本 block 放在关闭 </body> 之前标签
<script type="text/javascript">
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
this.style.fontWeight = 'bold';
}, false);
}
</script>
</body>
关于javascript - 单击时更改 css 字体粗细，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7237944/