2013-04-06 78 views
3

這個jQuery代碼在點擊時會突出顯示div框。jQuery:突出顯示div box onload

我想獲得高亮加載,我該怎麼做?

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

<style type="text/css"> 
div { margin: 0px; width: 100px; height: 80px; background: #666; border: 1px solid black; position: relative; } 
</style> 

    <script> 
    $(document).ready(function() { 

$("#div1").click(function() { 
     $(this).effect("highlight", {}, 3000); 
}); 

    }); 
    </script> 
</head> 
<body"> 
    <div id="div1"></div> 
</body> 
</html> 

回答

2

把語句highlight中的document.ready在同一水平要綁定click事件..

Live Demo

$(document).ready(function() { 
     $("#div1").effect("highlight", {}, 3000); //this will highlight on load 
     $("#div1").click(function() { 
      $(this).effect("highlight", {}, 3000); 
     });  
}); 
0

另外,這種方式可能有點清潔因爲如果你添加一些你想在點擊狀態下顯示的其他效果,你只需要一次定義它們。

$(document).ready(function() {  
     $("#div1").click(function() { 
      $(this).effect("highlight", {}, 3000); 
     });  
     $('#div1').click(); 
}); 
0

的Javascript

$(document).ready(function() { 
    $("#div1").effect("highlight", {}, 3000); 
}); 

這將突出div1當文檔已準備就緒。如果你還想要一個click處理程序,你可以保留它並且放入你想要的任何代碼(也就是說,如果你願意,你也可以保留effect)。

Fiddle