单击时更改CSS字体粗细

Question

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

Answer 1

这里有一个例子，您应该对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>

Answer 2

您需要为每个导航项添加一个click事件监听器，并更改其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>

单击时更改CSS字体粗细

问题描述

2 个解决方案

解决方案1
0 2011-08-30 02:07:28

解决方案2
0 已采纳 2011-08-30 02:09:08

单击时更改CSS字体粗细

问题描述

2 个解决方案

解决方案1 0 2011-08-30 02:07:28

解决方案2 0 已采纳 2011-08-30 02:09:08

解决方案1
0 2011-08-30 02:07:28

解决方案2
0 已采纳 2011-08-30 02:09:08