在html開(kāi)發(fā)中，我們經(jīng)常需要在文字和圖片之間進(jìn)行切換顯示。比如，點(diǎn)擊文字后顯示圖片，再次點(diǎn)擊圖片后又切換為文字顯示。那么，利用jquery該如何實(shí)現(xiàn)呢？這是一段文本內(nèi)容首先，我們需要?jiǎng)?chuàng)建一個(gè)div存

在html開(kāi)發(fā)中，我們經(jīng)常需要在文字和圖片之間進(jìn)行切換顯示。比如，點(diǎn)擊文字后顯示圖片，再次點(diǎn)擊圖片后又切換為文字顯示。那么，利用jquery該如何實(shí)現(xiàn)呢？

首先，我們需要?jiǎng)?chuàng)建一個(gè)div存放文字內(nèi)容，一個(gè)div存放圖片內(nèi)容，并使用CSS設(shè)置圖片默認(rèn)是隱藏的。

.text {

display: block;

width: 100%;

height: auto;

}

.image {

display: none;

width: 100%;

height: auto;

}

因?yàn)槲覀円褂胘query操作這些元素，所以需要先引入jquery腳本文件。

接下來(lái)，我們需要添加js腳本邏輯，為文本div添加點(diǎn)擊事件，當(dāng)被點(diǎn)擊時(shí)，將自身隱藏并顯示圖片div。

$(document).ready(function(){

$('.text').click(function(){

$(this).hide();

$('.image').show();

});

});

同樣地，我們也需要為圖片div添加點(diǎn)擊事件，當(dāng)被點(diǎn)擊時(shí)，將自身隱藏并顯示文本div。

$(document).ready(function(){

$('.image').click(function(){

$(this).hide();

$('.text').show();

});

});

最后，我們運(yùn)行頁(yè)面，開(kāi)始時(shí)會(huì)顯示文本內(nèi)容。當(dāng)我們點(diǎn)擊該div時(shí)，就會(huì)切換到圖片內(nèi)容。再次點(diǎn)擊圖片時(shí)，又會(huì)切換回文本內(nèi)容。

綜上所述，利用jquery實(shí)現(xiàn)文字和圖片的切換顯示非常簡(jiǎn)單。只需創(chuàng)建兩個(gè)div，并為它們分別添加點(diǎn)擊事件即可。