Home/ Questions/Q 6377473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T01:52:41+00:00

On another question I asked if I could set the font-weight to bold on

  • 0

On another question I asked if I could set the font-weight to bold on a text element when that text is selected. This has been completed much to the avail of @Eric ! But currently, when you click a text, you can happily click another one and both of the text will be bold.

How can I prevent more than one text element from being bold?

Here is my code on JSFiddle: http://jsfiddle.net/6XMzf/ or below:

CSS:

html,body {
    margin: 0;
    padding: 0
}
#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
    color: white;
}

.stretch {
    width:100%;
    height:100%;
}
.navigationPlaceholder {
    width:100px;
    height: 400px;
    left: 100px;
    top: 100px;
    position: absolute;
}
#navigation {
    background-color: #000000;
}
#navigationText ul {
    font-family: "Yanone Kaffeesatz";
    font-weight: 100;
    text-align: left;
    font-size: 25px;
    color: #b2b2b2;
    left: 25px;
    top: 50px;
    position: absolute;
    line-height: 40px;
    list-style-type: none;
}
.noSelect {
  -moz-user-select: none; /* mozilla browsers */
  -khtml-user-select: none; /* webkit browsers */
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Max Kramer | iOS Developer</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>
                    <li>iOS</li>
                    <li>Blog</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>
        </div>
        <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 = '400';
                }, false);
            }

        </script>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you don’t have a selector engine handy like jQuery and really have to do this in plain Javascript, I would do it like this:

    function addClass(elem, className) {
    if (elem.className.indexOf(className) == -1) {
        elem.className += " " + className;
    }
}

function removeClass(elem, className) {
    elem.className = elem.className.replace(new RegExp("\\s*" + className), "");
}

var lastSelected = null;

function initNavClickHandler() {
    var nav = document.getElementById('navigationText');
    var navItems = nav.getElementsByTagName('li');

    for (var i = 0; i < navItems.length; i++) {
        navItems[i].addEventListener('click', function() {
            addClass(this, "selected");
            if (lastSelected) {
                removeClass(lastSelected, "selected");
            }
            lastSelected = this;
        }, false);
    }
}

initNavClickHandler();

    Then, add a CSS rule that controls the selected look:

    .selected {font-weight: 800;}

    This is a lot more flexible for styling because you can add as many CSS rules as you want to the .selected class to change/modify it without ever touching your code.

    You can see it work here: http://jsfiddle.net/jfriend00/rrxaQ/

    • 0