jQuery—淘寶精品服飾案例

<body><div class="wrapper"><ul id="left"><li><a href="#">女靴</a></li><li><a href="#">雪地靴</a></li><li><a href="#">冬裙</a></li><li><a href="#">呢大衣</a></li><li><a href="#">毛衣</a></li><li><a href="#">棉服</a></li><li><a href="#">女褲</a></li><li><a href="#">羽絨服</a></li><li><a href="#">牛仔褲</a></li></ul><div id="content"><div><a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/女褲.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/羽絨服.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="images/牛仔褲.jpg" width="200" height="250" /></a></div></div></div>
</body>
<style type="text/css">* {margin: 0;padding: 0;font-size: 12px;}ul {list-style: none;}a {text-decoration: none;}.wrapper {width: 250px;height: 248px;margin: 100px auto 0;border: 1px solid pink;border-right: 0;overflow: hidden;}#left,#content {float: left;}#left li {background: url(images/lili.jpg) repeat-x;}#left li a {display: block;width: 48px;height: 27px;border-bottom: 1px solid pink;line-height: 27px;text-align: center;color: black;}#left li a:hover {background-image: url(images/abg.gif);}#content {border-left: 1px solid pink;border-right: 1px solid pink;}</style>
<script>// 鼠標進入li元素現在對應div// li的索引值和div索引值對應,// 所以我們只要指定我們鼠標進入li的索引值就可以知道要顯示的div// 對應div要顯示,其他div要隱藏// 入口函數$(function () {// 1、添加事件處理$('.wrapper li').mouseover(function () {// 1、獲取當前li的索引值【JQ如果想要索引值,index()】var index = $(this).index();// 讓對應div顯示// $('#content div').eq(index).show();// 讓兄弟元素都隱藏// $('#content div').eq(index).siblings().hide();$('#content div').eq(index).show().siblings().hide();});});</script>

注意jQuery等案例,需要引入jquery編輯文件

    <script src="jquery.min.js"></script>

實現效果:

在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/248129.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/248129.shtml
英文地址,請注明出處:http://en.pswp.cn/news/248129.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python機器學習實踐:決策樹判別汽車金融違約用戶

文章發布于公號【數智物語】 &#xff08;ID&#xff1a;decision_engine&#xff09;&#xff0c;關注公號不錯過每一篇干貨。 轉自 | 法納斯特&#xff08;公眾號ID:walker398&#xff09; 作者 | 小F 決策樹呈樹形結構&#xff0c;是一種基本的回歸和分類方法。 決策樹模型的…

Python學習(二)語言基礎

一、變量與類型 在程序設計中&#xff0c;變量是一種存儲數據的載體 整型&#xff1a;Python中可以處理任意大小的整數浮點型&#xff1a;浮點數也就是小數字符串型&#xff1a;字符串是以單引號或雙引號括起來的任意文本布爾型&#xff1a;布爾值只有True、False兩種值&#x…

jQuery—tab欄切換

<div class"tab"><div class"tab_list"><ul><li class"current">商品介紹</li><li>規格與包裝</li><li>售后保障</li><li>商品評價&#xff08;50000&#xff09;</li><l…

MongoDB分組查詢,聚合查詢,以及復雜查詢

準備數據 from pymongo import MongoClient import datetimeclientMongoClient(mongodb://localhost:27017) tableclient[db1][emp]l[ (張飛,male,18,20170301,,7300.33,401,1), #以下是教學部 (張云,male,78,20150302,teacher,1000000.31,401,1), (劉備,male,81,20130305,teac…

Python學習(三)基礎

一、函數與模塊 定義函數&#xff1a; 函數代碼塊以 def 關鍵詞開頭&#xff0c;后接函數標識符名稱和圓括號 ()。任何傳入參數和自變量必須放在圓括號中間&#xff0c;圓括號之間可以用于定義參數。函數的第一行語句可以選擇性地使用文檔字符串—用于存放函數說明。函數內容以…

操作系統原理之I/O設備管理(第六章上半部分)

一、I/O系統的組成 I/O系統不僅包括各種I/O設備&#xff0c;還包括與設備相連的設備控制器&#xff0c;有些系統還配備了專?? 于輸?/輸出控制的專?計算機&#xff0c;即通道。此外&#xff0c;I/O系統要通過總線與CPU、內存相連。 I/O系統的結構&#xff1a; I/O設備的分類…

js控制a標簽點擊事件 觸發下載

問題背景&#xff0c;動態獲取data把url賦值到a標簽的url中&#xff0c;讓a標簽自動下載 首先想到的應該是$(xxx).click(), 查資料明白&#xff1a;js中的$(...).click()事件只能觸發綁定的onClick方法&#xff0c;不能跳轉到href。 第二種方法&#xff1a;獲取到url之后locat…

操作系統原理之I/O設備管理(第六章下半部分)

五、I/O軟件原理 輸入輸出軟件的總體目標是將軟件組織成一種層次結構 低層軟件用來屏蔽硬件的具體細節高層軟件則主要是為用戶提供一個簡潔、規范的界面設備管理的4個層次&#xff1a; 用戶層軟件 -》向系統發出I/O請求&#xff0c;顯示I/O操作的結果&#xff0c;提供?戶與設備…

jQuery第二天

課程回顧&#xff1a; ? jQuery&#xff1a;JavaScript庫 ? 入口函數&#xff1a;$(function () {}); ? jQuery&#xff1a;jQuery對象&#xff0c;DOM對象 ? jQuery轉成DOM&#xff1a;$(‘元素’)[索引值] ? DOM轉成jQuery&#xff1a;$(DOM對象); ? 篩選方法&am…

切換Debug/Release編譯模式和Archive的作用

&#xfeff;在學這個之前&#xff0c;以為很難&#xff0c;也起不到什么作用&#xff0c;但是等真正運用到工程里面&#xff0c;才發現&#xff0c;這個能幫你省下很多工作量。 1&#xff0c;Debug和Release版本區別&#xff1f; 進行iOS開發&#xff0c;在Xcode調試程序時&am…

Linux 防火墻:Netfilter iptables

一、Netfilter 簡介 (1) Netfilter 是 Linux 內置的一種防火墻機制&#xff0c;我們一般也稱之為數據包過濾機制&#xff0c;而 iptables 只是操作 netfilter 的一個命令行工具(2) Netfilter 是 Linux CentOS 6 內置的防火墻機制&#xff0c;Firewall 是 Linux CentOS 7 內置的…

無法加載 DLL“SQLite.Interop.DLL”: 找不到指定的模塊。 (異常來自 HRESULT:0x8007007E)。...

無法加載 DLL“SQLite.Interop.DLL”: 找不到指定的模塊。 (異常來自 HRESULT:0x8007007E)。 在項目里添加 現有項 把SQLite.Interop.DLL文件添加進來&#xff0c;然后點擊屬性 修改一個屬性 把 屬性 復制到輸出目錄 改為 始終復制 然后打開你的項目屬性 進入生成的 頁面&a…

jQuery第三天

課程回顧&#xff1a; ? 動畫效果&#xff1a;基本動畫&#xff0c;滑動動畫&#xff0c;淡入淡出&#xff0c;自定義動畫效果(animate) ? 事件切換&#xff1a;hover(over&#xff0c;out); ? 停止動畫&#xff1a;stop ? 操作屬性&#xff1a;prop&#xff08;固有屬…

C語言程序設計II—第八周教學

第八周教學總結&#xff08;15/4-21/4&#xff09; 教學內容 本周的教學內容為&#xff1a;   8.4 電碼加密 知識點&#xff1a;指針與字符串&#xff0c;重難點&#xff1a;字符指針與字符串的關聯和區別&#xff1b;   8.5 任意個整數求和 知識點&#xff1a;動態內存分配…

AFNetworking 對數據進行https ssl加密

參考來源&#xff1a;http://www.cnblogs.com/jys509/p/5001566.html 現在在工作中的工作需求&#xff1a;https請求驗證證書一般來講如果app用了web service , 我們需要防止數據嗅探來保證數據安全.通常的做法是用ssl來連接以防止數據抓包和嗅探其實這么做的話還是不夠的 。…

數據庫系統原理(第一章概述)

一、數據庫基本概念 什么是數據&#xff1a;數據&#xff08;Data&#xff09;是描述事物的符號記錄&#xff0c;是指利用物理符號記錄下來的、 可以鑒別的信息。 數據是信息存在的一種形式&#xff0c;只有通過解釋或處理的數據才能成為有用的信息。 什么是數據庫&#xff1a;…

jQuery第四天

課程回顧&#xff1a; ? 元素操作&#xff1a; ? 遍歷元素&#xff1a; ? $(‘元素’).each(function (index, elm) {}); ? $.each(對象&#xff0c;function (index, elm) {}); ? 創建元素&#xff1a;$(‘ 新的元素?’);? 添加元素&#xff1a; ? 內部添加&…

navigationController的NavigationBar和ToolBar的POP或PUSH消失問題

今天在工作中發現一個坑&#xff0c; 其他頁面都是隱藏。YSViewController 使用的時候必須是需要 navigationBar 和 toorbar&#xff0c;但是 pop出這個viewcontroller后&#xff0c;需要隱藏navigationBar 和 toorbar&#xff0c;但是直接設置為hiddenYES會出現其他頁面壓棧出…

實驗二:Linux下Xen環境的安裝

實驗名稱&#xff1a; Linux下Xen環境的安裝&#xff08;centOS7&#xff09; 實驗環境&#xff1a; 本次實驗基本是在centOS7的環境下完成&#xff0c;系統內核和系統版本如下&#xff1a; 實驗要求&#xff1a; 為centOS7的環境下安裝Xen的平臺&#xff0c;能夠正常使用Xen下…

IDEA寫vue項目出現紅色波浪線警告如何解決??

1.看圖 2.希望對大家有幫助&#xff0c;只要修改了這個就可以&#xff0c;如有任何問題都可以留言&#xff0c;謝謝大家 2019-09-1923:54:11 作者&#xff1a;何秀好 轉載于:https://www.cnblogs.com/itboxue/p/11553395.html