jQuery第三章課後作業

suixinCaesar發表於2018-07-19
jQuery

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>

 

相關文章