1.超链接切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换图片</title>
<style>
p a{
text-decoration: none;
}
</style>
</head>
<div>
<img id="picture" src="../javaScript操作DOM对象/1.gif">
<p>
<a href="" onmouseover="a(1)">1</a>
<a href="" onmouseover="a(2)">2</a>
<a href="" onmouseover="a(3)">3</a>
<a href="" onmouseover="a(4)">4</a>
<a href="" onmouseover="a(5)">5</a>
</p>
</div>
<script>
function a(num) {
var img;
switch (num){
case 1:
img = "1.gif";
break;
case 2:
img = "2.gif";
break;
case 3:
img = "3.jpg";
break;
case 4:
img = "4.jpg";
break;
case 5:
img = "5.gif";
break;
}
var ne = document.createElement("img");
var old = document.getElementById("picture");
ne.setAttribute("src","../javaScript操作DOM对象/"+img);
old.parentNode.replaceChild(ne,old);
}
</script>
</body>
</html>2.单击在上传一个文件，按钮就增减一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="b">
<p>文件路径：
<input type="file" value="选择文件">
</p>
</div>
<input type="button" value="再上传一个文件" onclick="duplicate()">
<script>
function duplicate() {
var app = document.getElementById("b").firstChild
var copy = app.nextElementSibling.cloneNode(true);
document.getElementById("b").appendChild(copy).firstChild.nextSibling
}
</script>
</body>
</html>3.切换图书内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书切换</title>
<style>
#a{
font-size: 20px;
margin-right: 10px;
}
ul li{
list-style: none;
margin-left: -40px;
}
#total div:nth-of-type(2){
position: absolute;
left: 730px;
top: 35px;
}
#total div:nth-of-type(3){
position: absolute;
left: 802px;
top: 35px;
}
#total{
width:200px;
height: 250px;
margin: 0px auto;
border: 1px solid #ff7528;
}
#total div:nth-of-type(2) ul{
position: relative;
right: 62px;
}
#total div:nth-of-type(3) ul{
position: relative;
right: 134px;
}
</style>
</head>
<body>
<div id="total">
<span id="a">图书周排行榜</span><span id="b">TOP 100</span><br>
<div>
<input type="button" value="小说" style="width: 60px;" onmouseover="a()">
<ul id="wen" style="display: none;">
<li>1.时间旅行者的妻子</li>
<li>2.女心理师(下)</li>
<li>3.鬼吹灯之惊觉古城</li>
<li>4.女心理师(上)</li>
<li>5.小时候</li>
<li>6.追风的人</li>
<li>7.盗墓笔记</li>
<li>8.输赢</li>
</ul>
</div>
<div>
<input type="button" value="非小说" style="width: 70px;" onmouseover="b()">
<ul id="wen1" style="display: none;">
<li>1.人生若只如初见</li>
<li>2.高效能人士的七个</li>
<li>3.求医不如求己</li>
<li>4.人体使用手册</li>
<li>5.孩子，把你的手给我</li>
<li>6.别笑！我是英文单词书</li>
<li>7.人体经阁使用手册</li>
<li>8.股市稳赚</li>
</ul>
</div>
<div>
<input type="button" value="少儿" style="width: 60px;" onmouseover="c()">
<ul id="wen2" style="display: none;">
<li>1.人生若只如初见</li>
<li>2.高效能人士的七个</li>
<li>3.求医不如求己</li>
<li>4.人体使用手册</li>
<li>5.孩子，把你的手给我</li>
<li>6.别笑！我是英文单词书</li>
<li>7.人体经阁使用手册</li>
<li>8.股市稳赚</li>
</ul>
</div>
</div>
<script>
function a() {
document.getElementById("wen").style.display = "block"
document.getElementById("wen1").style.display = "none"
document.getElementById("wen2").style.display = "none"
}
function b() {
document.getElementById("wen1").style.display = "block"
document.getElementById("wen").style.display = "none"
document.getElementById("wen2").style.display = "none"
}
function c() {
document.getElementById("wen2").style.display = "block"
document.getElementById("wen").style.display = "none"
document.getElementById("wen1").style.display = "none"
}
</script>
</body>
</html>