单击时更改css字体粗细答案

【问题标题】：Change css font-weight upon click单击时更改css字体粗细
【发布时间】：2011-08-30 10:40:34
【问题描述】：

我对 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>

【问题讨论】：

XCode 你能再澄清一点吗？那么当他们点击导航项时，您希望它更改字体粗细吗？表示这是他们正在查看的部分？另外，如果我建议不要使用中断，而是使用无序列表来创建导航，这是一种更简洁的方法，您可以更好地控制项目。
谢谢，我已升级我的代码以使用<ul>！这正是我想做的！

标签： javascript html

【解决方案1】：

您需要为每个导航项添加一个单击事件侦听器并更改其font-weight 样式。

首先，为您的导航使用无序列表

<div id="navigationText">
    <ul>
        <li>iOS</li>
        <li>Blog</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</div>

然后，将此脚本块放在结束 </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>

【讨论】：

对不起，我会把这个放在哪里？！正如我上面所说，我是html + css的新手借口>它会进入head标签吗？
谢谢，我现在唯一的问题是点击文本后，div 中的所有文本都是粗体。我怎样才能防止这种情况发生？
@XCodeDev 这不是你想要的吗？也许你应该修改你的问题
对不起，我已经修改了问题，我只希望该 div 中的选定文本更改其字体粗细。
它现在根本不起作用。我有一个项目符号列表，单击后它的 fontWeight 不会改变。编辑---您错过了 navItems[] 数组中的“s”。

【解决方案2】：

这里有一个例子，你应该对你的 div 做同样的事情：

<html>
 <head>
  <script type="text/javascript">
   function displayResult()
   {
   document.getElementById("p1").style.fontWeight="900";
   }
  </script>
 </head>
 <body>
  <p id="p1">This is some text.</p>
  <br />
  <button type="button" onclick="displayResult()">Change font weight</button>
 </body>
</html>

【讨论】：