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

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

2 个答案: