Question

在另一个问题上，我询问是否可以在选择该文本时将text-weight设置为文本元素上的粗体。这已经完成了@Eric的有用！但是目前，当您单击文本时，您可以愉快地单击另一个文本，并且两个文本都将为粗体。

如何防止多个文本元素变为粗体？

以下是关于JSFiddle的代码：http://jsfiddle.net/6XMzf/或以下：

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>

Answer 1

如果你没有像jQuery一样方便的选择器引擎，并且真的必须在普通的Javascript中执行此操作，我会这样做：

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();

然后，添加一个控制所选外观的CSS规则：

.selected {font-weight: 800;}

这样可以更加灵活地进行样式设置，因为您可以根据需要为.selected类添加任意数量的CSS规则，以便在不触及代码的情况下更改/修改它。

您可以在此处查看：http://jsfiddle.net/jfriend00/rrxaQ/

Answer 2

如果你可以使用像jQuery这样的东西，那么这是一个更简单的问题。让我向您展示jQuery解决方案，用于突出显示和取消突出显示。

$("#navigationText li").click( function() { 
  $("#navigationText li").css("fontWeight", "100");
  $(this).css("fontWeight", "400");
});

现在你可以在没有jQuery的情况下自己做同样的事情。您需要创建一个包含当前粗体项的全局，并删除fontWeight或从所有项中删除fontWeight（暴力）。

        //untested with global to store currently selected
        var nav = document.getElementById('navigationText');
        var activeItem = null;

        var navItems = nav.getElementsByTagName('li');

        for (var i = 0; i < navItems.length; i++) {
            navItems[i].addEventListener('click', function() {
                if (activeItem) {activeItem.style.fontWeight = '100'; }
                this.style.fontWeight = '400';
                activeItem = this;
            }, false);
        }

        //sorry I don't feel like writing a brute force one for you!

如果选择了另一个li，则设置font-weight

2 个答案: