Jquery切换类功能不能正常工作

你好，我想改变事件处理程序的类的类，如鼠标悬停在鼠标或单击（）..但即时通讯面临的问题，它不会改变切换类的效果。代码请帮助我，谢谢。Jquery切换类功能不能正常工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Untitled Document</title> 

    <style type="text/css"> 


    .hello{ 

background:#60C; 


} 
     .main{ 
width:300px; 
height:300px; 
background:#00F; 
border-radius:10px; 
} 
    </style> 
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" > 


    $(function() { 
     $("#event").bind("mouseover mouseleave", highlight); 

     $("#event").bind("click", function(evt) { 
      $("#event").toggleClass("hello"); 
      $("#event").unbind("mouseover mouseleave", highlight); 
      $("#event").html("<p>You shut off the hover effect!</p>"); 
     }); 
    }); 

    function highlight(evt) { 
     $("#event").toggleClass("high");   
    } 


    </script> 
</head>

<div class="main" id="event"> 
    This is a div click to highlight 
    </div>

来源

2012-09-08 Junaid Akhtar

也许是因为你没有在你的CSS'high'类？ – undefined

但stil你好类没有工作和 –

你的代码适用于悬停状态，但你没有一个high类在你的CSS。

.high { 
    property: value 
}

对于绑定/解除绑定事件，你可以使用on和off方法：

$(function() { 
    $("#event").on("mouseover mouseleave", highlight); 

    $("#event").on("click", function(evt) { 
     $(this).toggleClass("hello"); 
     $(this).off("mouseover mouseleave", highlight); 
     $(this).html("<p>You shut off the hover effect!</p>"); 
    }); 
}); 

function highlight(evt) { 
    $("#event").toggleClass("high"); 
}

http://jsfiddle.net/t3B5Z/

来源

2012-09-08 08:54:32 undefined

+1的解决方案演示 – Adil

Jquery切换类功能不能正常工作

回答

相关问题