Question

the scenarion：有4个div，其中一个被点击选中，所选择的有一个特定的类

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

@Update

当我们点击元素时，下面的代码也可以工作，所以这个make元素不变

$(".taskdiv").hover(

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

Answer 1

试试这个：

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

Answer 2

尝试

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

演示：Fiddle

点击元素添加特定的类不使用jquery

2 个答案: