gongdong9971 2017-08-16 07:57 采纳率: 100%
浏览 18744
已采纳

html5 如何实现按钮点击后自身变颜色,用以记录此按钮被点击过

本人刚接触html5 先谢谢各位大神了
我想要的效果是: 点击第一个按钮,第一个按钮变颜色,点击第二2 按钮 第二个按钮也变颜色,刷新后 所有按钮恢复初始颜色,并且不影响按钮的功能
麻烦给我完整的源码,,我新手 基本看不懂


<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜电影</title>

<script type="text/javascript">
function changeSource1()
{document.getElementById("iframe").src="http://www.btpipi.com/e/" + document.getElementById('sss').value +"/"}

function changeSource2()
{document.getElementById("iframe").src="http://www.13910.com/s/?kw=" + document.getElementById('sss').value}
</script>
</meta>

<body>
<label for="sss"></label>
<input name="sss" type="text" id="sss" value="杀破狼" />
<input type="submit" style="height:22px;width:70px;" value="BTpipi" onClick="changeSource1()" />
<input type="submit" style="height:22px;width:70px;" value="盘找我" onClick="changeSource2()"/>
<br />
<iframe id="iframe" align=middle marginwidth=0 vspace=-0 marginheight=0 src="http://www.baidu.com/" frameborder=no width=100% scrolling=auto height=903 ></iframe>

</body>
</html>
  • 写回答

8条回答 默认 最新

  • 鼠晓 博客专家认证 2017-08-16 08:16
    关注

    按照你的需求，，我把代码改了改，，你试试，，，我在Google Chrome测试，，，正常运行，，

    代码如下：

     <!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>搜电影</title>

    <script type="text/javascript">
        function changeSource1() {
            var but1 = document.getElementById('button1');
            but1.style.backgroundColor = '#2222ff';
            document.getElementById("iframe").src = "http://www.btpipi.com/e/" + document.getElementById('sss').value + "/";
        }

        function changeSource2() {
            var but2 = document.getElementById('button2');
            but2.style.backgroundColor = "#2222ff";
            document.getElementById("iframe").src = "http://www.13910.com/s/?kw=" + document.getElementById('sss').value;
        }
    </script>
</head>

<body>
<label for="sss"></label>
<input name="sss" type="text" id="sss" value="杀破狼"/>
<input type="submit" style="height:22px;width:70px;" value="BTpipi" onClick="changeSource1()" id="button1"/>
<input type="submit" style="height:22px;width:70px;" value="盘找我" onClick="changeSource2()" id="button2"/>
<br/>
<iframe id="iframe" align=middle marginwidth=0 vspace=-0 marginheight=0 src="http://www.baidu.com/" frameborder=no
width=100% scrolling=auto height=903></iframe>

</body>
</html>

    有问题还可以追问，，，木有问题，，请采纳。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(7条)

报告相同问题？

悬赏问题

  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制
  • ¥20 usb设备兼容性问题
  • ¥15 错误(10048): “调用exui内部功能”库命令的参数“参数4”不能接受空数据。怎么解决啊
  • ¥15 安装svn网络有问题怎么办