0

方案是：有 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>

@更新

当我们单击元素时，下面的代码也有效，因此这使元素不变

$(".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 回答