I have the following code. As soon as I move away the cursor the background color back to white right now. How can I select the li element when the user clicks?

<link href=".3.2/css/bootstrap.min.css" rel="stylesheet">
<link href=".0/css/font-awesome.css" rel="stylesheet">
<script src=".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>

I have the following code. As soon as I move away the cursor the background color back to white right now. How can I select the li element when the user clicks?

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn./font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<script src="https://ajax.googleapis./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

• 1 Clicks are the province of javascript. – Paulie_D Commented Feb 10, 2016 at 17:01

5 Answers 5

Since you already use jQuery, why not just using the click function.

For selecting only one item:

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

jsFiddle

For selecting multiple items:

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

jsFiddle

In your CSS, override the background-color as follows. It's actually set on the <a> tag, not the <li> in Bootstrap.

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

Use it like this:

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

and jQuery like this:

<script type="text/javascript">

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

You can do like this, where you add a label and an input to your li, and no script is needed.

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
}

You can add an active class to your links.

HTML

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

CSS

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

To change background-color on click, you have to use jQuery.

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

Updated JSFiddle

put your li tag in another a tag then use any of these pseudo-classes 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;