如何使用Javascript在html中的ul li div中设置一个活动的类？答案

【问题标题】：How to set a class active in ul li div in html using Javascript?如何使用Javascript在html中的ul li div中设置一个活动的类？
【发布时间】：2014-11-04 21:50:45
【问题描述】：

我有一个导航菜单项，其中有 ul li 元素，我想在单击导航栏时更改 li 类的颜色等。我为此写了一些javascript，但它只打开导航菜单项，但是当我单击子项时，顶部菜单项会关闭，并且无法将li 项设置为活动状态。这是我的 Javascript：

<script type="text/javascript">
          $(document).ready(function () {
              $('#moduleNav .locked').tooltip();
              $('#moduleNav').on('hide', function () {
                  $(this).find('.accordion-group').each(function () {
                      $(this).removeClass('open');
                  });
              });
              $('#moduleNav').on('show', function (e) {
                  $(e.target).siblings('.accordion-group').addClass('open');
              });
              $('#moduleNav').on('show', function (e) {
                  $(e.target).siblings('.accordion-inner').addClass('li.active');
              });
          });
    </script>

这里是这个的html：

<div class="accordion-group  ">
 <a class="accordion-toggle " data-toggle="collapse" data-target="#submenuitem" data-parent="#moduleNav" href="javascript:void(0);">Open menu item</a>
                </div>
<div id="submenuitem" class="accordion-body collapse ">
 <div class="accordion-inner">
<ul>
<li class="">
 <a href="#">sub item 1</a>
 </li>
<li class="">
 <a href="#">sub item 2</a>
</li>
 </ul>
 </div>

这里是css：

#moduleNav .accordion-group .accordion-inner ul li {
    border-bottom: 1px solid #3ab553;
    padding: 10px 6px;
    position: relative;
}

    #moduleNav .accordion-group .accordion-inner ul li.active {
        background: #d6efd3;
    }

        #moduleNav .accordion-group .accordion-inner ul li.active:after {
            left: 100%;
            top: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-left-color: #d6efd3;
            border-width: 10px;
            margin-top: -10px;
        }

【问题讨论】：

addClass('li.active') 应该是 addClass('active')。复制其他问题的演示会有所帮助
是的，查理说了什么，active 被删除了？

标签： javascript jquery html css

【解决方案1】：

例子

CSS：

.active{
  background:#00c189l;
}
.inactive{
  background:gray;
}

HTML: div id="example" class="inactive" onclick="Change();">示例/div

JAVASCRIPT：使用 Jquery：

function Change(){

   $('#example').removeClass("inactive");
   $('#example').addClass("active");
}

http://jquery.com/download/

【讨论】：