如果选择了另一个li，则设置字体粗细

Set font-weight back if another li is selected

本文关键字：设置 字体 选择 另一个 li 如果      更新时间：2023-09-26

关于另一个问题，我问我是否可以在文本元素被选中时将该文本的font-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 */
}

: 

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

如果你手边没有像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;}

这是更灵活的样式，因为你可以添加尽可能多的CSS规则，你想要的。selected类更改/修改它，而无需触及你的代码。

您可以在这里看到它的工作原理:http://jsfiddle.net/jfriend00/rrxaQ/

如果你能使用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!
相关文章：