HTML+JS根据下拉列表内容改变图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<select onchange="changePic(this.value)">
			<option value="01">1111111111</option>
			<option value="02">222222222222</option>
			<option value="01">1111111111</option>
		</select>
		<img id="showme" src="01.jpg" width="460px" height="186px"/>
		<script>
			function changePic(path) {
				document.getElementById("showme").src = path + ".jpg";
			}
		</script>
	</body>
</html>

 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 旅游网站的HTML代码主要用于构建网站的基础结构和内容,CSS代码用于美化页面的样式,而JavaScript代码则用于增加页面的交互性和动态效果。 在HTML代码中,我们会使用一些常见的标签来构建页面的结构,如`<header>`用于定义页面的头部,`<nav>`用于导航栏,`<main>`用于页面的主要内容,`<footer>`用于页面的底部等。此外,我们还会使用一些标签来插入多媒体元素,如`<img>`用于插入图片,`<video>`用于插入视频等。 CSS代码则用于为页面添加样式,我们可以通过选择器来选取页面中的元素,然后为其添加样式。例如,我们可以使用选择器`header`来选取页面的头部,然后为其添加背景颜色、字体大小等样式。此外,我们还可以使用CSS属性来调整元素的尺寸、边距、边等。 JavaScript代码用于为页面增加交互性和动态效果。通过JavaScript,我们可以对页面中的元素进行操作,例如获取表单输入、处理点击事件、动态改变元素内容等。我们可以使用JavaScript语法来编写各种功能的代码,如函数、条件语句、循环等。 总之,旅游网站的HTML代码用于搭建页面结构和内容,CSS代码用于美化页面样式,JavaScript代码则为页面增加交互性和动态效果,三者相互配合,共同完成一个功能完备的旅游网站。 ### 回答2: 旅游网站的HTML、CSS、JS代码包括以下几个部分: 1. HTML部分: (1) 网站结构:使用HTML的标签创建网站的基本结构,包括头部、导航栏、内容区域、页脚等。可以使用div、header、nav、section、footer等标签进行布局。 (2) 导航栏:使用无序列表(ul)和列表项(li)创建网站的导航栏,其中每个列表项可以使用锚点(<a>标签)链接到对应的页面。 (3) 搜索:在导航栏中添加一个搜索,使用<input>标签创建输入,并使用<button>标签创建搜索按钮。 (4) 主要内容区域:使用<div>标签创建主要内容区域,包括旅游景点介绍、热门推荐、活动信息等。 (5) 活动列表:使用无序列表和列表项创建活动列表,每个列表项可以包含活动的标题、日期、地点和描述等信息。 2. CSS部分: (1) 网站样式:使用CSS选择选择网站的各个元素,并设置其样式,包括背景颜色、字体大小、字体样式、边样式等。 (2) 导航栏样式:设置导航栏的样式,包括背景颜色、字体颜色、悬停效果等。 (3) 搜索样式:设置搜索的样式,包括输入大小、边样式、按钮样式等。 (4) 内容区域样式:设置内容区域的样式,包括布局、字体样式、边距等。 (5) 活动列表样式:设置活动列表的样式,包括列表项之间的间距、悬停效果等。 3. JS部分: (1) 页面交互:使用JavaScript代码实现页面的交互功能,如搜索的自动补全、导航栏的下拉菜单、活动列表的筛选等。 (2) 数据获取和展示:通过AJAX请求获取后台数据,并使用JavaScript代码将数据展示在网页上,如获取旅游景点的图片、介绍和评分信息。 (3) 点击事件:为网页中的元素绑定点击事件,如点击活动列表中的某个活动后跳转到对应的详细页面。 通过以上HTML、CSS、JS代码的编写和组合,可以创建一个功能完善、界面美观的旅游网站,提供用户友好的浏览体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值