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

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条)

报告相同问题?

悬赏问题

  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名