單擊時更改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