使用jquery

时间:2017-11-25 12:50:55

标签: jquery jquery-ui

如何使用jquery将类添加为li中的活动。我对此没有任何想法。我已多次尝试,但没有得到预期的输出。我在这里写了示例代码,请检查我的代码,让我知道其他任何事情。

<ul class="sidebar-menu" data-widget="tree">
        <li class="treeview">
          <a href="#">
            <i class="fa fa-table"></i> <span>Tables</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
            <li><a href="data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
          </ul>
        </li>        
      </ul>

如何在li中将该类应用为活动状态。需要获得这样的输出。请满足我的需求。

    <ul class="sidebar-menu" data-widget="tree">
<li class="treeview active">
  <a href="#">
    <i class="fa fa-table"></i> <span>Tables</span>
    <span class="pull-right-container">
      <i class="fa fa-angle-left pull-right"></i>
    </span>
  </a>
  <ul class="treeview-menu menu-open">
    <li><a href="simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
    <li class="active"><a href="data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
  </ul>
</li>
</ul>

1 个答案:

答案 0 :(得分:0)

简单的解决方案是:

$('li').on('click', function(){
  $('.active').removeClass(); //removes .active class from currently active li
  $(this).addClass('active'); //sets this element .active
});

//编辑:下面有一个工作。类active使特定<li>颜色为红色。

&#13;
&#13;
$('li').on('click', function(){
      $('.active').removeClass(); //removes .active class from currently active li
      $(this).addClass('active'); //sets this element .active
    });
&#13;
li {
  cursor: pointer;
}
.active {
  color: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
&#13;
&#13;
&#13;