JQuery切換顯示的效果實例代碼
更新時間:2013年02月27日 11:56:50 作者:
本文講解了JQuery切換顯示的效果實例代碼,需要的朋友可以參考一下
JQuery真的太強大了,真好看!
Jquery代碼如下:
復制代碼 代碼如下:
$(function () {
$(".n_zyb_gzright .n_zyb_gzrightlist").hover(function () {
$(this).find(".n_zyb_gzrightlistc").attr("style", "display:block").parent().siblings().find(".n_zyb_gzrightlistc").attr("style", "display:none");
})
})
Html代碼如下:
復制代碼 代碼如下:
<div class="n_zyb_gzright">
<div class="n_zyb_gzrightlist">
<a target="_blank" class="a1" href="/Media/PlayMedia/212.shtml" title="我們都能幸福著">
我們都能幸福著</a> <a class="" href="javascript:void(0)">人氣:<font>1</font></a>
<div class="clear">
</div>
<div style="display:block" class="n_zyb_gzrightlistc">
<div class="index_zx_img_left">
<a target="_blank" href="/User/ShowInfo/220">
<img src="http://www.dbjr.com.cn/Avatar/2012113010521695319512.gif"></a></div>
<div class="n_zpcen_ti">
<a target="_blank" href="/User/ShowInfo/220">jstu001</a><br>
<a target="_blank" class="n_zpa" href="/User/ShowInfo/220">
作品:<span>18</span></a> </div>
<div class="clear">
</div>
</div>
</div>
<div class="n_zyb_gzrightlist">
<a target="_blank" class="a1" href="/Media/PlayMedia/232.shtml" title="開心就好了。">
開心就好了。</a> <a class="" href="javascript:void(0)">人氣:<font>1</font></a>
<div class="clear">
</div>
<div style="display:none" class="n_zyb_gzrightlistc">
<div class="index_zx_img_left">
<a target="_blank" href="/User/ShowInfo/221">
<img src="http://www.dbjr.com.cn/Avatar/2013011410552810013828.jpg"></a></div>
<div class="n_zpcen_ti">
<a target="_blank" href="/User/ShowInfo/221">jteacher001</a><br>
<a target="_blank" class="n_zpa" href="/User/ShowInfo/221">
作品:<span>12</span></a> </div>
<div class="clear">
</div>
</div>
</div>
<div class="n_zyb_gzrightlist">
<a target="_blank" class="a1" href="/Media/PlayMedia/213.shtml" title="2131321">
</a> <a class="" href="javascript:void(0)">人氣:<font>0</font></a>
<div class="clear">
</div>
<div style="display:none" class="n_zyb_gzrightlistc">
<div class="index_zx_img_left">
<a target="_blank" href="/User/ShowInfo/220">
<img src="http://www.dbjr.com.cn/Avatar/2012113010521695319512.gif"></a></div>
<div class="n_zpcen_ti">
<a target="_blank" href="/User/ShowInfo/220">jstu001</a><br>
<a target="_blank" class="n_zpa" href="/User/ShowInfo/220">
作品:<span>18</span></a> </div>
<div class="clear">
</div>
</div>
</div>
</div>
您可能感興趣的文章:
- jquery淡化版banner異步圖片文字效果切換圖片特效
- jQuery簡單實現(xiàn)banner圖片切換
- javascript 上下banner替換具體實現(xiàn)
- jquery左右滾動焦點圖banner圖片鼠標經(jīng)過顯示上下頁按鈕
- 比較漂亮的幾款迎國慶Banner圖片打包下載
- 十個新年banner,祝大家新年快樂!
- Banner程序
- 利用PHP實現(xiàn)與ASP Banner組件相似的類
- 非??岬慕荁ANNER
- JS+DIV實現(xiàn)鼠標劃過切換層效果的實例代碼
- JS實現(xiàn)切換標簽頁效果實例代碼
- js圖片自動切換效果處理代碼
- 最簡單的js圖片切換效果實現(xiàn)代碼
- 網(wǎng)站基于flash實現(xiàn)的Banner圖切換效果代碼
相關文章
解決qrcode.js生成二維碼時必須定義一個空div的問題
這篇文章主要介紹了解決qrcode.js生成二維碼時必須定義一個空div的問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07基于?jquery-cxselect?實現(xiàn)下拉聯(lián)動效果功能實現(xiàn)
這篇文章主要介紹了基于?jquery-cxselect?實現(xiàn)下拉聯(lián)動效果,下拉聯(lián)動是基于query的一款聯(lián)動下拉菜單插件 jquery-cxselect實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-02-02jQuery實現(xiàn)點擊任意位置彈出層外關閉彈出層效果
在之前做項目的時候經(jīng)常會在主頁面上點擊某個按鈕,右側(cè)彈出一個div輸出對應內(nèi)容的詳細信息,怎么實現(xiàn)的呢,今天小編給大家分享通過jquery實現(xiàn)點擊任意位置彈出層外關閉彈出層效果,感興趣的朋友一起看看吧2016-10-10jQuery+AJAX實現(xiàn)網(wǎng)頁無刷新上傳
這篇文章主要介紹了jQuery+AJAX實現(xiàn)網(wǎng)頁無刷新上傳的相關資料,十分詳細,需要的朋友可以參考下2015-02-02