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

【问题标题】：Set font-weight back if another li is selected如果选择了另一个 li，则设置字体粗细
【发布时间】：2012-07-22 17:18:25
【问题描述】：

在另一个问题上，我问是否可以在选择文本元素时将字体粗细设置为粗体。这已经在@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>

【问题讨论】：

你能jsfiddle.net吗？
至少在FF 6中，当我点击元素时什么也没有发生。请注意，将元素 HTML 文档放在 jsfiddle 的框架中是不对的。
试试这个：jsfiddle.net/6XMzf/1.
您还链接到一个不存在的 CSS 文件（在 jsfiddle 上）。在左上角的框架中仍然有一个完整的 HTML 文档。

标签： javascript html css

【解决方案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/

【讨论】：

谢谢，在我接受这个之前，你能告诉我如果选择的文字是“博客”，我怎么能算出来？！
检测博客 LI 的最佳方法是将class="blog" 放在该 LI 标记上。您还可以基于该类使用不同的 CSS。有关 HTML/CSS/JS 的工作示例，请参阅 jsfiddle.net/jfriend00/w4Udw。您可以使用代码来测试标签的文本，但这不如使用类。
它为我提取每个 li 标签，并在所有这些标签上运行 if 语句，maxk.me/test
在hasClass() 函数中有一个错误的括号。现已修复：jsfiddle.net/jfriend00/w4Udw

【解决方案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!

【讨论】：

好的，我是html+css的新手，从来没有用过jquery，jquery代码应该放在哪里？