0

シナリオは次のとおりです。4つのdivがあり、クリックするとそのうちの1つが選択され、選択されたものには特定のクラスがあります

これはjqueryコードです

      $(".taskdiv").click(function(){
       id = $(this).attr("id");
       $(".taskdiv").removeClass("taskItemActive");
       $(".taskdiv").addClass("taskItem");
       $("#"+id).removeClass("taskItem");
   $("#"+id).addClass("taskItemActive"); // the last two lines , where the element clicked is selected by id , seems to do nothg 

      });

これは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;
       };

そして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>

@アップデート

以下のコードは、要素をクリックしたときにも機能するため、要素は変更されません

$(".taskdiv").hover(

  function () {
   color = $(this).css("background-color");
    $(this).css("background-color","LightSteelBlue");
  },
  function () {
    $(this).css("background-color",color);
  }
);
4

2 に答える 2

1

これを試して：

$(".taskdiv").click(function () {
    $(".taskdiv.taskItemActive").removeClass("taskItemActive");
    $(".taskdiv").addClass("taskItem");
    $(this).removeClass("taskItem").addClass("taskItemActive");
});
于 2013-05-03T11:06:56.000 に答える
1

試す

$(".taskdiv").click(function(){
    $(".taskdiv.taskItemActive").removeClass("taskItemActive");
    $(".taskdiv").not(this).addClass("taskItem");
    $(this).addClass("taskItemActive");
});

デモ:フィドル

于 2013-05-03T11:09:59.317 に答える