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个回答

按照你的需求,,我把代码改了改,,你试试,,,我在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>

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

Small_Mouse0
鼠小 回复gongdong9971: jquery可以简化这些东西“document.getElementById()”,,楼上有提到“$(this).style("background","颜色");”
大约 3 年之前 回复
Small_Mouse0
鼠小 回复gongdong9971: 额,精简为一句:document.getElementById('button2').style.backgroundColor = "#2222ff";,,,不过你需要给每个按钮设置点击事件(而且都不不一样),,,30个按钮得30个函数,,你可以把我这句代码放在一个新的函数里,用的时候调用,,,,代码多没关系
大约 3 年之前 回复
Small_Mouse0
鼠小 额,精简为一句:document.getElementById('button2').style.backgroundColor = "#2222ff";,,,不过你需要给每个按钮设置点击事件(而且都不不一样),,,30个按钮得30个函数,,你可以把我这句代码放在一个新的函数里,用的时候调用,,,,代码多没关系
大约 3 年之前 回复
gongdong9971
gongdong9971 非常感谢 还能精简一些吗,如果我有30个按钮 这源码有点太多了..
大约 3 年之前 回复

用js或者jq控制变色 刷新会恢复原本的样子的
1.

function buttonClick(buttonId){
document.getElementById(buttonId).style.background="red";

}

jq


$("#button").click(function(){
$(this).css("background","颜色");

})

这个问题很简单,首先你可以在onClick方法中传入一个this,这样便于很快很精确的找到你所点击的按钮,否者你还需要通过jqeury的选择器方式找到你点击的按钮,
然后在你的 head 中定义一个style,然后定义自己的样式如:

.myclass{ background-color: red; }
然后修改你的changeSource1和changeSource2方法,如下:
function changeSource1(_this){
    $(_this).addClass("myclass");
    document.getElementById("iframe").src="http://www.btpipi.com/e/" + document.getElementById('sss').value +"/"
}
接下来就只需要在style中修改你自己定义的class来达到你需要的按钮样式效果了,望采纳!!
gongdong9971
gongdong9971 看不懂啊 大神, style 具体怎么修改? 我刚开始学 对一些代码都没什么概念 最好给我个完整的代码
大约 3 年之前 回复

var buttons=document.getElements.byClassName("inputClassName");
var l=buttons.length;
for(var i=0;i<l;i++){
buttons[i].onclick=function(){
this.style.background="#ccc"
}
}

非常感谢 ,但这代码还能精简一些吗,如果我的按钮有30个 感觉源码也太多了些

qq_35728177
Tsui丶 按钮多就用jq控制,给需要点击变色的按钮都加上相同的class。
大约 3 年之前 回复

按钮多就用jq控制,给需要点击变色的按钮都加上相同的class。

function BindByJquery() {

$('.button').on("click", function () {

$(this).style.background="red";
}

        });  

    }  

<!DOCTYPE html >



搜电影







function changeSource(srcStr,obj) { $(obj).css("background","red"); $('#iframe').attr('src',srcStr + $("#sss").val()); }




 <!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>搜电影</title>
</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="changeSource('http://www.btpipi.com/e/',this)"/>
<input type="submit" style="height:22px;width:70px;" value="盘找我" onClick="changeSource('http://www.13910.com/s/?kw=',this)"/>
<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>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
    function changeSource(srcStr,obj) {
        $(obj).css("background","red");
        $('#iframe').attr('src',srcStr + $("#sss").val());
    }
</script>
</body>
</html>
likun_li
@Banana 用jquery也行的通,测试通过
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐