为什么这样改变不了id值
window.onload = function() {
var obj = document.getElementById('uh1');
obj.onclick = function() {
$("#uh1_pic").show();
$("#uh2_pic").hide();
$("#uh1").attr("id", "hj");
}
}
这样就可以 ，但是没有执行点击事件 就改变了id值
window.onload = function() {
var obj = document.getElementById('uh1');
obj.onclick = function() {
$("#uh1_pic").show();
$("#uh2_pic").hide();
}
$("#uh1").attr("id", "hj");
}
6 个解决方案
#1
刚刚试了下代码是可以改变的！调试看看是不是有其他问题，把attr换成prop
#2
只试了这句吗？$("#uh1").attr("id", "hj");
#3
window.onload = function() {
var obj = document.getElementById('uh1');
obj.onclick = function() {
$("#uh1_pic").show();
$("#uh2_pic").hide();
$("#uh1").attr("id", "hj");
}
}
#4
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>智能设备</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<meta charset="utf-8"
content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=0"
name="viewport">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>/QY7pro/css/QY7procss.css" media="screen">
<script type="text/javascript"
src="<%=basePath%>/QY7pro/js/jquery.min.js"></script>
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
overflow: visiable;
font-family: 黑体;
}
</style>
</head>
<body>
<div class="usehelp_frame">
<div class="uh1" id="uh1">
<span>扫码连接</span> <span class="sde">></span>
</div>
<div class="uh1_pic" id="uh1_pic">
<img src="./img/2.jpg">
</div>
<div class="uh2" id="uh2">
<span>设备绑定</span> <span class="sde">></span>
</div>
<div class="uh1_pic" id="uh2_pic">
<img src="./img/2.jpg">
</div>
</div>
</body>
<script type="text/javascript">
$("#uh1_pic").hide();
$("#uh2_pic").hide();
window.onload = function() {
var obj = document.getElementById('uh1');
obj.onclick = function() {
$("#uh1_pic").show();
$("#uh2_pic").hide();
click();
$("#uh1").attr("id", "hj");
}
alert($("#uh1").attr("id"));
var obj = document.getElementById('uh2');
obj.onclick = function() {
$("#uh1_pic").hide();
$("#uh2_pic").show();
}
}
</script>
</html>
.usehelp_frame{
width:100%;
height:100%;
position:relative;
}
.uh1,.uh2{
width:100%;
height:50px;
line-height:50px;/*设置行高*/
font:400 16px/50px "微软雅黑";
position:relative;
border-bottom:1px solid #f6f6f7;
}
.uh1 span,.uh2 span{
margin-left:30px;
float:left;
}
.uh1 .sde,.uh2 .sde{
margin-right:30px;
float:right;
font-family:"宋体";
}
.uh1_pic,.uh2_pic{
width:100%;
position:relative;
text-align:center;
border-bottom:1px solid #f6f6f7;
}
#5
点击之后id确实是被修改了。
#6
#1
刚刚试了下代码是可以改变的！调试看看是不是有其他问题，把attr换成prop
#2
只试了这句吗？$("#uh1").attr("id", "hj");
#3
window.onload = function() {
var obj = document.getElementById('uh1');
obj.onclick = function() {
$("#uh1_pic").show();
$("#uh2_pic").hide();
$("#uh1").attr("id", "hj");
}
}
#4
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>智能设备</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<meta charset="utf-8"
content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=0"
name="viewport">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>/QY7pro/css/QY7procss.css" media="screen">
<script type="text/javascript"
src="<%=basePath%>/QY7pro/js/jquery.min.js"></script>
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
overflow: visiable;
font-family: 黑体;
}
</style>
</head>
<body>
<div class="usehelp_frame">
<div class="uh1" id="uh1">
<span>扫码连接</span> <span class="sde">></span>
</div>
<div class="uh1_pic" id="uh1_pic">
<img src="./img/2.jpg">
</div>
<div class="uh2" id="uh2">
<span>设备绑定</span> <span class="sde">></span>
</div>
<div class="uh1_pic" id="uh2_pic">
<img src="./img/2.jpg">
</div>
</div>
</body>
<script type="text/javascript">
$("#uh1_pic").hide();
$("#uh2_pic").hide();
window.onload = function() {
var obj = document.getElementById('uh1');
obj.onclick = function() {
$("#uh1_pic").show();
$("#uh2_pic").hide();
click();
$("#uh1").attr("id", "hj");
}
alert($("#uh1").attr("id"));
var obj = document.getElementById('uh2');
obj.onclick = function() {
$("#uh1_pic").hide();
$("#uh2_pic").show();
}
}
</script>
</html>
.usehelp_frame{
width:100%;
height:100%;
position:relative;
}
.uh1,.uh2{
width:100%;
height:50px;
line-height:50px;/*设置行高*/
font:400 16px/50px "微软雅黑";
position:relative;
border-bottom:1px solid #f6f6f7;
}
.uh1 span,.uh2 span{
margin-left:30px;
float:left;
}
.uh1 .sde,.uh2 .sde{
margin-right:30px;
float:right;
font-family:"宋体";
}
.uh1_pic,.uh2_pic{
width:100%;
position:relative;
text-align:center;
border-bottom:1px solid #f6f6f7;
}
#5
点击之后id确实是被修改了。
#6