Jquery-點選隱藏事件-滑鼠點選1時2隱藏

2019-12-11 08:54:34

在觀看網站時經常會遇到這樣的情景，剛開啟的瀏覽器跳出一個廣告，然後點選關閉按鈕後，廣告框消失，下面我們就以程式碼的形式做出這種效果。

首先我們要考慮下，跳出的廣告框只有一個關閉按鈕，而沒有開啟按鈕，黨點選關閉按鈕後，關閉按鈕欄和廣告欄一起消失，所以我們預設這是一個包含的關係。

<div>我是廣告我是廣告我是廣告我是廣告我是廣告我是廣告我是廣告我是廣告

</div>

可以先將jquery檔案調入，然後建立style標籤，進行div的修飾，並新增相對定位

<style>

div{width:200px;height:200px;background-color:#FF00DD;margin:50px auto;position:relative;}

</style>

然後對h1進行修飾，新增絕對定位，如圖

<style>

div{width:200px;height:200px;background-color:#FF00DD;margin:50px auto;padding:20px;color:white;position:relative;}

h1{position:absolute;top:5px;right:5px;margin:0;background-color:blue;}

</style>

然後開始進行事件編寫，當滑鼠點選h1時，div消失，所以需要點選的是h1，

$("h1").click(function(){

})

點選h1後，發生的變化就是div整個消失，所以輸入：

$("h1").click(function(){

$("div").hide()

})

然後儲存檔案，在瀏覽器中預覽檢視效果，當點選h1時，看div是否消失。