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 使用Jdk8自带的算法，和Jdk11自带的加密结果会一样吗，不一样的话有什么解决方案，Jdk不能升级的情况
  • ¥15 画两个图 python或R
  • ¥15 在线请求openmv与pixhawk 实现实时目标跟踪的具体通讯方法
  • ¥15 八路抢答器设计出现故障
  • ¥15 请教一下c语言的代码里有一个地方不懂
  • ¥15 opencv 无法读取视频
  • ¥15 用matlab 实现通信仿真
  • ¥15 按键修改电子时钟，C51单片机
  • ¥60 Java中实现如何实现张量类，并用于图像处理(不运用其他科学计算库和图像处理库）)
  • ¥20 5037端口被adb自己占了