本人刚接触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>
按照你的需求，，我把代码改了改，，你试试，，，我在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>
有问题还可以追问，，，木有问题，，请采纳。
<!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>
用js或者jq控制变色 刷新会恢复原本的样子的
1.
function buttonClick(buttonId){
document.getElementById(buttonId).style.background="red";
}
jq
$("#button").click(function(){
$(this).css("background","颜色")；
})
这个问题很简单，首先你可以在onClick方法中传入一个this,这样便于很快很精确的找到你所点击的按钮，否者你还需要通过jqeury的选择器方式找到你点击的按钮，
然后在你的 head 中定义一个style，然后定义自己的样式如：
然后修改你的changeSource1和changeSource2方法，如下：
function changeSource1(_this){
$(_this).addClass("myclass");
document.getElementById("iframe").src="http://www.btpipi.com/e/" + document.getElementById('sss').value +"/"
}
接下来就只需要在style中修改你自己定义的class来达到你需要的按钮样式效果了，望采纳！！
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个 感觉源码也太多了些
按钮多就用jq控制，给需要点击变色的按钮都加上相同的class。
function BindByJquery() {
$('.button').on("click", function () {
$(this).style.background="red";
}
});
}
<!DOCTYPE html >