addclass - on click on element add specific class not working with jquery -
the scenarion : there 4 divs , 1 of them selected once clicked , selected 1 has specific class
this jquery code
$(".taskdiv").click(function(){ id = $(this).attr("id"); $(".taskdiv").removeclass("taskitemactive"); $(".taskdiv").addclass("taskitem"); $("#"+id).removeclass("taskitem"); $("#"+id).addclass("taskitemactive"); // last 2 lines , element clicked selected id , seems nothg }); this css
.taskitem{ background-color:#4e6d8d; -moz-box-shadow: -5px -5px 5px cornflowerblue; -webkit-box-shadow: -5px -5px 5px cornflowerblue; box-shadow: -5px -5px 5px cornflowerblue; cursor: pointer; } div .itemtitle{ padding-left: 15%; padding-top: 5%; } .taskdiv{ height: 50px;width: 200px;color: white;margin: 5%; } .taskitemactive{ background-color: #3a87ad; -moz-box-shadow: -5px -5px 5px #5dade2; -webkit-box-shadow: -5px -5px 5px #5dade2; box-shadow: -5px -5px 5px #5dade2; }; and html
<td> <div class="taskitemactive taskdiv" id="taskitem1"><h3 class="itemtitle" >dates limites (0) <h3></div> </td> <td> <div class="taskitem taskdiv" id="taskitem2"><h3 class="itemtitle" > congés </h3></td> <td> <div class="taskitem taskdiv" id="taskitem3"><h3 class="itemtitle" > discipline </h3></td> <td> <div class="taskitem taskdiv" id="taskitem4" ><h3 class="itemtitle" >autre..</h3></td> @update
the code below works when click element , make element unchanged
$(".taskdiv").hover( function () { color = $(this).css("background-color"); $(this).css("background-color","lightsteelblue"); }, function () { $(this).css("background-color",color); } );
try this:
$(".taskdiv").click(function () { $(".taskdiv.taskitemactive").removeclass("taskitemactive"); $(".taskdiv").addclass("taskitem"); $(this).removeclass("taskitem").addclass("taskitemactive"); });
Comments
Post a Comment