jQuery第三章課後作業
阿新 • • 發佈：2019-02-06
3.實現有一個圖片和五個數字連結，單擊不同的數字連結顯示不同的圖片。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>圖片輪換</title> <link rel="stylesheet" href="css/scroll.css"> </head> <body> <div class="scroll"> <div id="num"> <a href="#" onmouseover="one()">1</a> <a href="#" onmouseover="two()">2</a> <a href="#" onmouseover="three()">3</a> <a href="#" onmouseover="four()">4</a> <a href="#" onmouseover="fifth()">5</a> </div> <img src="images/1.gif" alt="圖片" id="photo"/> </div> <script> var doc = document.getElementById("photo"); function one() { doc.setAttribute("src","images/1.gif") } function two() { doc.setAttribute("src","images/2.gif") } function three() { doc.setAttribute("src","images/3.jpg") } function four() { doc.setAttribute("src","images/4.jpg") } function fifth() { doc.setAttribute("src","images/5.gif") } </script> </body> </html>
4.製作一個有單擊“再上傳一個檔案”按鈕就增加一行，可以增加許多相同的檔案上傳的行。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>上傳檔案</title> <style> #main{margin:0 auto; width: 500px;} dl{clear: both; width: 100%;} dt{ float: left; width: 100px; text-align: right; } </style> </head> <body> <div id="main"> <dl id="upload"> <dt>檔案路徑：</dt> <dd><input name="fileImages" type="file" /></dd> </dl> <div id="addBtn"><input id="up" type="button" value="再上傳一個檔案" onclick="addInput()"/></div> </div> <script> function addInput() { var dl = document.createElement("dl"); var dt = document.createElement("dt"); var dd = document.createElement("dd"); var input = document.createElement("input"); dl.appendChild(dt); dl.appendChild(dd); dd.appendChild(input); dt.innerHTML="檔案路徑：" input.setAttribute("type","file"); document.getElementById("main").insertBefore(dl,document.getElementById("addBtn")); } </script> </body> </html>
5.製作當滑鼠指標放在“小說”“非小說”或“少兒”上時，標題背景改變為另一個圖片，滑鼠指標變為手狀，並且下面的圖書標題變為對應類別下的標題。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>TAB切換</title> <link href="css/tab.css" rel="stylesheet"> <style> ul li{ background:url("images/menu1.gif")no-repeat; width: 47px; text-align: center; } #book1{display: block} #book2{display: none} #book3{display: none} .li:hover{ background: url("images/menu2.gif")no-repeat; } </style> </head> <body> <div class="div_bg"> <ul> <li id="bg1" onmouseover="change(1)"><a class="white">小說</a></li> <li id="bg2" onmouseover="change(2)"><a class="white">非小說</a></li> <li id="bg3" onmouseover="change(3)"><a class="white">少兒</a></li> </ul> <div id="book1"> <a href="#" target=_blank>1.時間旅行者的妻子</a><br> <a href="#" target=_blank>2.女心理師（下）</a><br> <a href="#" target=_blank>3.鬼吹燈之精絕古城</a><br> <a href="#" target=_blank>4.女心理師（上）</a><br> <a href="#" target=_blank>5.小時候</a><br> <a href="#" target=_blank>6.追風箏的人</a><br> <a href="#" target=_blank>7.盜墓筆記2</a><br> <a href="#" target=_blank>8.輸贏</a> </div> <div id="book2"> <a href="#" target=_blank>1.人生若只如初見</a><br> <a href="#" target=_blank>2.高效能人士的七個..</a><br> <a href="#" target=_blank>3.求醫不如求己</a><br> <a href="#" target=_blank>4.人體使用手冊</a><br> <a href="#" target=_blank>5.孩子，把你的手給我</a><br> <a href="#" target=_blank>6.別笑！我是英文單詞書</a><br> <a href="#" target=_blank>7.人體經絡使用手冊</a><br> <a href="#" target=_blank>8.股市穩賺</a> </div> <div id="book3"> <a href="#" target=_blank>1.斯凱瑞金色童書・..</a><br> <a href="#" target=_blank>2.哈利・波特與“混..</a><br> <a href="#" target=_blank>3.不一樣的卡梅拉（..</a><br> <a href="#" target=_blank>4.它們是怎麼來的</a><br> <a href="#" target=_blank>5.五・三班的壞小子..</a><br> <a href="#" target=_blank>6.男生日記</a><br> <a href="#" target=_blank>7.哈利・波特與魔法石</a><br> <a href="#" target=_blank>8.噼裡啪啦叢書(全7冊)</a> </div> </div> <script> function change(num) { var div1 = document.getElementById("book1"); var div2 = document.getElementById("book2"); var div3 = document.getElementById("book3"); document.getElementById("bg1").className="li"; document.getElementById("bg2").className="li"; document.getElementById("bg3").className="li"; switch (num){ case 1: div1.style.display="block"; div2.style.display="none"; div3.style.display="none"; break; case 2: div1.style.display="none"; div2.style.display="block"; div3.style.display="none"; break; case 3: div1.style.display="none"; div2.style.display="none"; div3.style.display="block"; break; } } </script> </body> </html>