目錄

1.新浪下拉菜單

2.淘寶服飾精品

---

1.新浪下拉菜單

利用jQuery基礎(chǔ)選擇器$("選擇器")

選擇對應(yīng)的方法實(shí)現(xiàn)

實(shí)現(xiàn)效果

實(shí)現(xiàn)代碼

<script>$(function() {// 鼠標(biāo)經(jīng)過$(".nav>li").mouseover(function() {// $(this) jQuery 當(dāng)前元素 this不要加引號// show() 顯示元素 hide() 隱藏元素$(this).children("ul").show();});// 鼠標(biāo)離開$(".nav>li").mouseout(function() {$(this).children("ul").hide();})}) </script>

遇到的問題：下拉框不顯示

原因：jQuery文件導(dǎo)入不成功

解決：修改路徑

2.淘寶服飾精品

• tab欄左右切換，關(guān)鍵是鼠標(biāo)經(jīng)過左右的li得到相應(yīng)的索引呈現(xiàn)對應(yīng)的照片，并將其他照片隱藏起來。
• $(this).index()可以快速獲得索引號
• 相應(yīng)索引號顯示出來$("#content div").eq(index).show();
• 其余照片隱藏$("#content div").eq(index).siblings().hide();

實(shí)現(xiàn)效果

?

?

?實(shí)現(xiàn)代碼

<script src="jquery.min.js"></script><script>$(function() {//1.鼠標(biāo)經(jīng)過左側(cè)的li$("#left li").mouseover(function(){//2.得到當(dāng)前小li的索引號var index=$(this).index();console.log(index);//3.讓我們右側(cè)的盒子相應(yīng)索引號顯示出來$("#content div").eq(index).show();//4.讓其余的圖片(就是其他的兄弟)隱藏起來$("#content div").eq(index).siblings().hide();})}) </script>

遇到的問題依然是jQuery文件不存在，我重新導(dǎo)入，檢查路徑是否正確，最后發(fā)現(xiàn)每次導(dǎo)入文件必須在同一個(gè)目錄下導(dǎo)入才能成功。

總結(jié)

以上是生活随笔為你收集整理的新浪下拉菜单案例淘宝服饰精品案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。