文章/答案/技术大牛

发布

社区首页 >问答首页 >单击时如何选择li元素？

问单击时如何选择li元素？
EN

Stack Overflow用户

提问于 2016-02-11 00:59:35

回答 5查看 5.3K关注 0票数 0

我有以下代码。只要我把光标移开，背景颜色马上就会变回白色。当用户单击时，如何选择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>

javascript

jquery

html

css

twitter-bootstrap-3

回答 5

Stack Overflow用户

发布于 2016-02-11 01:16:34

既然你已经在使用jQuery了，为什么不直接使用点击功能呢？

仅选择one项目：

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

用于选择multiple items：

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

在CSS中，重写background-color，如下所示。它实际上是在<a>标签上设置的，而不是Bootstrap中的<li>。

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

票数 5

Stack Overflow用户

发布于 2016-02-11 01:12:28

您可以将活动类添加到链接中。

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

票数 1

Stack Overflow用户

发布于 2016-02-11 01:20:22

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

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
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35321363

复制

相似问题

问单击时如何选择li元素？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击时如何选择li元素？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击时如何选择li元素？
EN