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>
Share
Improve this question
edited Feb 10, 2016 at 19:28
Stickers
78.8k24 gold badges155 silver badges194 bronze badges
asked Feb 10, 2016 at 16:59
Nick KahnNick Kahn
20.1k97 gold badges286 silver badges416 bronze badges
1
- 1 Clicks are the province of javascript. – Paulie_D Commented Feb 10, 2016 at 17:01
5 Answers
Reset to default 6Since 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;