网页交互案例-优快云博客

本文介绍了三个实用的网页交互案例，包括通过点击数字链接显示不同图片、动态增加文件上传行及实现TAB选项卡的内容切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>