單擊時如何選擇li元素？

Question

我有以下代碼。 當我移開光標后，背景顏色立即恢復為白色。 用戶單擊時如何選擇li元素？

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <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 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') ;
  });
});

更新了JSFiddle

Answer 3

您可以這樣做，在li添加label和input ，而無需腳本。

更新小提琴

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

像這樣使用它：

       <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>

和jQuery是這樣的：

<script type="text/javascript">

$(document).ready(function() {
      $("#sidebar li").click(function(){
         $("#sidebar li").removeClass('active');
         $(this).addClass('active') ;
    });
});
</script>

Answer 5

將您的li標簽放在另一個標簽中，然后使用這些偽類中的任何一個w3schools偽類

/* 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;