编写html与js交互网页心得：编写两个按钮切换显示不一样的图片
第一步:先创建一个html网页,以下：html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<div>
<input class="btnhy1" type="button" value="一楼" style="width: 80px;height: 30px; border: 2px; background: #2290E0;"/>
<input class="btnhy2" type="button" value="二楼" style="width: 80px;height: 30px; border: 2px; background: #2290E0;"/>
</div>
<div>
<img id="image1" src="img/111.jpg"/>
<img id="image2" src="img/222.jpg"/>
</div>
</div>
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>jquery
须要注意的是：index.js使用“$”时，必需要引用“ <script src="./js/jquery-1.8.3.min.js"></script>”，要否则就会报 “Uncaught ReferenceError: $ is not defined”错误，若是引用的路径不对就会报：“Failed to load resource: net::ERR_FILE_NOT_FOUND”ide
第二步：编写index.js的代码,代码以下：htm
//alert("111")
$("#image1").show();
$("#image2").hide();
});
//alert("222")
$("#image2").show();
$("#image1").hide();
});
- 1. ## Html编写问题心得
- 2. 本身写一个图片按钮(XAML)
- 3. 如何编写一个按钮样式系统
- 4. Android 与JS交互 调用本地相册在Html页面显示图片
- 5. 点击按钮切换，echarts 图显示不正确
- 6. Qt编写导航按钮
- 7. ## 轮播的&小图片按钮切换
- 8. 编写html页面
- 9. 按钮相互切换
- 10. MondrianSchema编写心得
- 更多相关文章...
- • HTML 页面显示 XML 数据 - XML 教程
- • jQuery Mobile 按钮图标 - jQuery Mobile 教程
- • 互联网组织的未来：剖析GitHub员工的任性之源
- • SpringBoot中properties文件不能自动提示解决方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. ## Html编写问题心得
- 2. 本身写一个图片按钮(XAML)
- 3. 如何编写一个按钮样式系统
- 4. Android 与JS交互 调用本地相册在Html页面显示图片
- 5. 点击按钮切换，echarts 图显示不正确
- 6. Qt编写导航按钮
- 7. ## 轮播的&小图片按钮切换
- 8. 编写html页面
- 9. 按钮相互切换
- 10. MondrianSchema编写心得