Change css font-weight upon click_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-31 20:15 出处：网络

相关专题：javascript

I am pretty new to css + html and am coding my first website. I have a navigation menu setup inside a div, but I want to change the font-weight of the clicked text from lighter t开发者_StackOverflow中文版o bold when the user clicks on an item in it (text). Please can you tell me how to do this?

Here is my code so far:

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>

You need to add a click event listener each navigation item and change its font-weight style.

First, start by using an unordered list for your nav

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

Then, place this script block just before the closing </body> tag

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

here you have an example, you should do the same wih your 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>