Question

我有一个包含多个“onclick”事件的HTML未排序列表。当选择列表项时，我想将其更改为粗体，而其他项保持正常。有一个简单的方法吗？我找到了这个答案，却无法成功应用它。有人可以为我进一步解释吗？ changing the font to bold on a HTML unsorted list when clicked

Answer 1

如果您对使用jQuery（如问题标签）执行此操作的“常规”示例方法感兴趣，您可以访问我刚创建的示例小提琴http://jsfiddle.net/9gSf6/或查看以下代码

$(document).ready(function(){
    $("ul.b > li").each(function(){
        $(this).click(function(){
            $("ul.b > li").css('font-weight','normal');
            $(this).css('font-weight','bold');
        });
    });
});

适用于<li>元素

中包含的<ul class="b">元素

如果你的内部有多个<ul><li>会更好

$(document).ready(function(){
    var select = 'ul.b li:not(:has(>ul))';
    $(select).each(function(){
        $(this).click(function(){
            $(select).css('font-weight','normal');
            $(this).css('font-weight','bold');
        });
    });
});

检查更新的小提琴：http://jsfiddle.net/9gSf6/3/

在没有循环的情况下也可以这样做，就像这样

$(document).ready(function(){
    var select = 'ul.b li:not(:has(>ul))';
    $(select).click(function(){
        $(select).css('font-weight','normal');
        $(this).css('font-weight','bold');
    });
});

同样的作品：http://jsfiddle.net/9gSf6/4/

Answer 2

请查看以下代码

  <html>
    <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

   <script type="text/javascript">
      $(document).ready(
      function() 
      {
      $('#list li').click(function () {
        $(this).siblings('li').css("fontWeight", "normal");
        $(this).css("fontWeight", "bold");
      });

    });
     </script>

    </head>
    <body>

      <div id="list">
        <ul>
          <li> item1</li>
          <li> item2</li>
          <li> item3</li>
          <li> item4</li>
          <li> item5</li>
        </ul>
      </div>

    </body>
    </html>

Answer 3

纯Javascript解决方案，以防您需要它：

var lis = document.getElementById("list").getElementsByTagName("li");
if (lis.length > 0)
{
    for(var i = 0; i < lis.length; i++)
    {
        lis[i].addEventListener("click", function()
        {
            clean(lis);
            this.className = "bold";
        }, false);
    }
}

clean = function(p)
{
    for(var i = 0; i < p.length; i++)
    {
        p[i].className = "";
    }
}

http://jsfiddle.net/hescano/zdRP2/

Onclick粗体选择

3 个答案: