jQuery第六章課後作業
5.製作當頁面載入完畢時，列表隔行變色，背景顏色值為#ececec。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>隔行變色的列表</title>
<link rel="stylesheet" href="css/nav.css">
</head>
<body>
<div class="content">
<dl>
<dt><a href="http://www.6655.com/1/youxi.htm">[頁遊]</a></dt>
<dd >
<ul>
<li><a href="http://codes.dian5000.com/htmlcode/38319.html">槍魂</a>
<a href="http://p.37pk49.com/s/1/683/11722.html?uid=510412">女神聯盟</a> <a
href="http://tg.131cc.com/?uid=510412">37WAN遊戲</a> <a
href="http://p.37pk49.com/s/1/683/13574.html?uid=510412">武易</a> <a
href="http://jcnm.game3737.com/htmlcode/36266.html">鬥聖</a> <a
href="http://tk.pk897.com/1616dh.php?id=2467">烈焰</a> <a
href="http://p.37pk49.com/s/1/683/14006.html?uid=510412">大鬧天宮OL</a></li>
</ul>
</dd>
<dd class="more"><a href="http://www.6655.com/1/youxi.htm">更多>></a></dd>
</dl>
<dl class="s1">
<dt><a href="http://www.6655.com/1/xiaoyouxi.htm">[小遊戲]</a></dt>
<dd >
<ul>
<li><a href="http://www.4339.cc">4339小遊戲</a> <a
href="http://www.6949.com">6949小遊戲</a> <a
href="http://www.3155.com/?hmsr=1616">3155小遊戲</a> <a
href="http://www.4399i.net/">4399i小遊戲</a> <a
href="http://www.3199.cn/?hmsr=1616">3199小遊戲</a> <a
href="http://www.7k7k7.net">7k7k7小遊戲</a></li>
</ul>
</dd>
<dd class="more"><a href="http://www.6655.com/1/xiaoyouxi.htm">更多>></a>
</dd>
</dl>
<dl>
<dt><a href="http://www.6655.com/1/yingshi.htm">[影視]</a></dt>
<dd >
<ul>
<li><a href="http://www.iqiyi.com">愛奇藝高清</a><a
href="http://www.tudou.com/">土豆網</a><a
href="http://tv.sohu.com/movie/">搜狐電影</a><a href="http://tv.cntv.cn/">CNTV</a>
<a href="http://www.kktv1.com/c.shtml?c=52560">KK美女視訊</a> <a
href="http://p.yiqifa.com/s?sid=a4df75c5719e9b11&pid=184&wid=410486&vid=426282&cid=7100&lid=168915&euid=&vwid=">六間房</a>
</li>
</ul>
</dd>
<dd class="more"><a href="http://www.6655.com/1/yingshi.htm">更多>></a>
</dd>
</dl>
<dl class="s1">
<dt><a href="http://www.6655.com/1/xiaoshuo.htm">[小說]</a></dt>
<dd >
<ul>
<li><a href="http://www.qdmm.com/">起點女生網</a> <a
href="http://www.zongheng.com/?co=1616">縱橫中文網</a> <a
href="http://p.yiqifa.com/c?s=3b2f15ba&w=88243&c=6805&i=23342&l=0&e=&t=http://www.zazhipu.com/">雜誌鋪</a><a
href="http://www.xxsy.net/">瀟湘書院</a> <a
href="http://www.qidian.com/Default.aspx">起點</a> <a
href="http://www.xs8.cn/">言情小說吧</a></li>
</ul>
</dd>
<dd class="more"><a href="http://www.6655.com/1/xiaoshuo.htm">更多>></a>
</dd>
</dl>
<dl>
<dt><a href="http://www.6655.com/1/youxi.htm">[遊戲]</a></dt>
<dd >
<ul>
<li><a href="http://365.uc108.com/">同城遊棋牌</a><a
href="http://games.sina.com.cn/">新浪遊戲</a><a
href="http://p.yiqifa.com/c?s=ae39a645&w=154815&c=6756&i=23904&l=0&e=&t=http://www.5173.com/">5173遊戲交易</a><a
href="http://www.17173.com/">17173遊戲</a><a
href="http://www.duowan.com/">多玩遊戲</a></li>
</ul>
</dd>
<dd class="more"><a href="http://www.6655.com/1/youxi.htm">更多>></a>
</dd>
</dl>
<dl class="s1">
<dt><a href="http://www.6655.com/1/yinyue.htm">[音樂]</a></dt>
<dd >
<ul>
<li><a href="http://www.1ting.com">一聽音樂網</a> <a
href="http://mp3.sogou.com/">搜狗音樂</a> <a
href="http://music.baidu.com">百度mp3</a> <a
href="http://www.yinyuetai.com/">音悅臺MV</a> <a
href="http://www.iqiyi.com/zongyi/superboy.html">快樂男聲</a></li>
</ul>
</dd>
<dd class="more"><a href="http://www.6655.com/1/yinyue.htm">更多>></a>
</dd>
</dl>
<dl>
<dt><a href="http://www.6655.com/1/jiaoyou.htm">[交友]</a></dt>
<dd >
<ul>
<li><a
href="http://reg.jiayuan.com/st/?id=421710&url=http://reg.jiayuan.com">世紀佳緣</a>
<a href="http://www.zhiji.com/?ad=1616" class="green">同城交友網</a><a
href="http://www.zhenai.com/901934.html">珍愛網</a><a
href="http://www.9see.com/go123?from=120_1">美女秀場</a> <a
href="http://www.iqiyi.com/zongyi/fcwr.html">非誠勿擾</a></li>
</ul>
</dd>
<dd class="more"><a href="http://www.6655.com/1/jiaoyou.htm">更多>></a>
</dd>
</dl>
<dl class="s1">
<dt><a href="http://www.6655.com/1/lvyou.htm">[旅遊]</a></dt>
<dd >
<ul>
<li><a
href="http://vacations.ctrip.com/?allianceid=1091&sid=1227&ouid=">攜程旅遊</a><a
href="http://www.tuniu.com/?p=1627&cmpid=mkt_08005301&utm_campaign=daohang&utm_source=1616.net&utm_medium=textlink"
class="green">途牛旅遊網</a><a href="http://www.zoutu.com/">雲南旅遊</a><a
href="http://hotel.elong.com/?banid=1616">藝龍訂酒店</a> <a
href="http://www.qunar.com/?ex_track=auto_4f4dd298">去哪兒旅遊</a> <a
href="http://detail.tmall.com/item.htm?id=21737099723">迪士尼門票</a> <a
href="http://www.17u.cn/FlightQuery.aspx#refid=14748221">同程機票</a></li>
</ul>
</dd>
<dd class="more"><a href="http://www.6655.com/1/lvyou.htm">更多>></a>
</dd>
</dl>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("dl:odd").css("background","#ececec")
})
</script>
</body>
</html>
6.單擊圖片是，顯示提示資訊：單擊提示資訊後，該資訊隱藏。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>分享特效</title>
<style type="text/css">
dt{height:30px;}
dt img{margin-left:80px;display:none;}
</style>
</head>
<body>
<dl>
<dt ><img src="images/text.gif" /></dt>
<dd>分享到：<img src="images/iocns.gif" /></dd>
</dl>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("dd").click(function () { //單擊顯示
$("img:eq(0)").css("display","block");
})
$("img:eq(0)").click(function () { //單擊之後隱藏
$("img:eq(0)").css("display","none");
})
})
</script>
</body>
</html>
相關文章
- jQuery第五章課後作業jQuery
- jQuery第七章課後作業jQuery
- jQuery第二章課後作業jQuery
- jQuery第三章課後作業jQuery
- jQuery第四章課後作業jQuery
- jQuery第一章課後作業jQuery
- JAVA課後作業Java
- HTML5和CSS3開發第六章課後作業HTMLCSSS3
- 課後作業1：字串加密字串加密
- 軟體工程概論 第一課：課後作業1軟體工程
- PHP基礎教程-22 課後作業05PHP
- PHP基礎教程-27 課後作業06PHP
- PHP基礎教程-28 課後作業07PHP
- PHP基礎教程-21 課後作業04PHP
- PHP基礎教程-12 課後作業02PHP
- PHP基礎教程-13 課後作業03PHP
- PHP基礎教程-06 課後作業01PHP
- 課後作業——30道四則運算
- CSAPP 第六章課後習題APP
- 開課作業
- 華南農業大學C語言程式設計課後習題（第六章）C語言程式設計
- 9.23課堂作業
- 課堂作業--黑客語解密黑客解密
- linux 實驗課作業Linux
- HTML+CSS編寫靜態網站-45 課後作業09HTMLCSS網站
- HTML+CSS編寫靜態網站-35 課後作業07HTMLCSS網站
- HTML+CSS編寫靜態網站-40 課後作業08HTMLCSS網站
- 課程排課系統：智慧排課+線上約課+直播上課+作業打卡！
- 21天精通c++ 第一章(緒論)課後作業C++
- 軟體工程課程小作業軟體工程
- 作業系統思考 第六章 記憶體管理作業系統記憶體
- jQuery第六章知識點jQuery
- HTML5和CSS3開發第七章課後作業HTMLCSSS3
- HTML5和CSS3開發第五章課後作業HTMLCSSS3
- 資料庫課程作業筆記資料庫筆記
- C語言I博課作業04C語言
- 作業系統課程設計感受作業系統
- C++課作業 魔獸世界Part 1C++