Question

我有以下代码。一旦我移开光标，背景颜色就会变回白色。如何在用户点击时选择<name>mapred.job.tracker</name>元素？

＆＃13;

<value>192.168.0.1:8021</value>

＆＃13;

Answer 1

由于您已经使用了jQuery，为什么不使用click函数。

仅选择一个项目：

$('.nav li').click(function() {
  $(this).toggleClass('active').siblings().removeClass('active');
});

<强> jsFiddle

选择多个项：

$('.nav li').click(function() {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
  } else {
    $(this).addClass('active');
  }
});

<强> jsFiddle

在您的CSS中，按如下方式覆盖background-color。它实际上设置在<a>标记上，而不是Bootstrap中的<li>。

.nav>li.active>a {
  background-color: #ccc;
}

Answer 2

您可以为链接添加活动类。

HTML

<a class="list-group-item active>Work Order</a>

CSS

.list-group-item.active {
    background-color: gray
}

要在点击时更改背景颜色，您必须使用jQuery。

$( document ).ready(function() {
  $(".nav li a").click(function(){
     $('li a.active').removeClass('active');
     $(this).addClass('active') ;
  });
});

Updated JSFiddle

Answer 3

您可以这样做，向label添加input和li，不需要任何脚本。

Update fiddle

HTML

<label><input type="radio" class="hideme" name="li">
  <a class="list-group-item">
    <i class="icon-home icon-1x"></i>Work Order Jobs
  </a>
</label>

CSS

label {
  display: inline-block;
  width: 100%;
}
.hideme {
  display: none;
}
.hideme:checked + .list-group-item{
    background-color: gray
}

Answer 4

像这样使用：

def find_names(object, key_name)
  case (object)
  when Array
    object.flat_map do |e|
      find_names(e, key_name)
    end
  when Hash
    [ object[key_name] ] + find_names(object.values, key_name).compact
  end
end

和jQuery这样：

       <style type="text/css">
            .nav li.active {
             background-color:grey;
            }
        </style>
        <div class="col-sm-2 col-md-2" id="sidebar-wrapper">
          <div id="sidebar">
            <ul class="nav list-group" style="cursor:pointer;">
              <li class="active">
                <a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order</a>
              </li>
              <li>
              <a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order Jobs</a>
              </li>
            </ul>
          </div>
        </div>

Answer 5

将你的li标签放在另一个标签中，然后使用任何这些伪类 w3schools pseudo classes

/* unvisited link */
    a:link {
        color: #FF0000;
    }

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;

单击时如何选择li元素？

5 个答案: