jquery中show()，先显示，后又立即消失，麻烦帮我看看
<body><tableid="table1"><tr><th>姓名</th><th>年龄</th><th>职位</th><th>工资</th><th>操作</th></...
<body>
<table id="table1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>成龙</td>
<td>45</td>
<td>演员</td>
<td>50k</td>
<td>
<a href="" class="view">查看</a>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
<tr>
<td>马云</td>
<td>50</td>
<td>总裁</td>
<td>1亿</td>
<td>
<a href="" class="view">查看</a>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
</table>
<div id="div1">
<p><strong>姓名:</strong><span></span></p>
<p><strong>年龄:</strong><span></span></p>
<p><strong>职业:</strong><span></span></p>
<p><strong>工资:</strong><span></span></p>
</div>
<script>
$('.view').click(function(){
$('#div1').show();
});
</script>
<script src="file:///D|/soft/jquery-3.0.0/jquery-3.0.0.min.js"></script>
<style>
table,th,td{border: solid thin red; border-collapse:collapse;}
table{top:200px;left:200px;width:500px; height:200px; position:absolute; left:50%; margin-left:-250px; text-align:center;}
#div1{ width:500px; height:150px; border: solid thin red; position:absolute; left:50%; margin-left:-250px; top:20px; display:none;}
div p{ border-bottom:solid thin red;}
</style> 展开
<table id="table1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>成龙</td>
<td>45</td>
<td>演员</td>
<td>50k</td>
<td>
<a href="" class="view">查看</a>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
<tr>
<td>马云</td>
<td>50</td>
<td>总裁</td>
<td>1亿</td>
<td>
<a href="" class="view">查看</a>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
</table>
<div id="div1">
<p><strong>姓名:</strong><span></span></p>
<p><strong>年龄:</strong><span></span></p>
<p><strong>职业:</strong><span></span></p>
<p><strong>工资:</strong><span></span></p>
</div>
<script>
$('.view').click(function(){
$('#div1').show();
});
</script>
<script src="file:///D|/soft/jquery-3.0.0/jquery-3.0.0.min.js"></script>
<style>
table,th,td{border: solid thin red; border-collapse:collapse;}
table{top:200px;left:200px;width:500px; height:200px; position:absolute; left:50%; margin-left:-250px; text-align:center;}
#div1{ width:500px; height:150px; border: solid thin red; position:absolute; left:50%; margin-left:-250px; top:20px; display:none;}
div p{ border-bottom:solid thin red;}
</style> 展开
2个回答
展开全部
我把你的html js的位置什么的稍微改了下：
jquery是我重新引入的
你的问题
第一 我把绑定方法在在
$(function(){
// bind。。。
});这中间了，等dom加载后再绑定；
第二：如果a标签不跳转作为点击事件 请加上： <a href="javascript:void(0);"class="view">查看</a>
第三：绑定方法中阻止冒泡：event.stopPropagation();
其中 2 3做的是一样的事情。有不清楚的地方可追问我。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table,
th,
td {
border: solid thin red;
border-collapse: collapse;
}
table {
top: 200px;
left: 200px;
width: 500px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -250px;
text-align: center;
}
#div1 {
width: 500px;
height: 150px;
border: solid thin red;
position: absolute;
left: 50%;
/*margin-left: 0px;*/
top: 20px;
display: none;
}
div p {
border-bottom: solid thin red;
}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
$('.view').click(function(event) {
$('#div1').show();
event.stopPropagation();
});
});
</script>
<body>
<table id="table1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>成龙</td>
<td>45</td>
<td>演员</td>
<td>50k</td>
<td>
<a href="javascript:void(0);"class="view">查看</a>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
<tr>
<td>马云</td>
<td>50</td>
<td>总裁</td>
<td>1亿</td>
<td>
<a href="" class="view">查看</a>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
</table>
<div id="div1">
<p><strong>姓名:</strong><span></span></p>
<p><strong>年龄:</strong><span></span></p>
<p><strong>职业:</strong><span></span></p>
<p><strong>工资:</strong><span></span></p>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
微测检测5.10
2023-05-10 广告
您好！建议咨 深圳市微测检测有限公司，已建立起十余个专业实验室，企业通过微测检测就可以获得一站式的测试与认 证解决方案；(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互 联、语音通话质量），认证遇...
点击进入详情页
本回答由微测检测5.10提供
展开全部
<script>
$('.view').click(function(event){
$('#div1').show();
event.preventDefault();
});
</script>
这样试试看，如果能够解决问题的话，原因就是a标签点击后页面跳转导致页面刷新
更多追问追答
追问
你的这个方法成功了，我猜也是display:none,用show（）显示后,被刷新成了none;
但是我看的视频上面也没有用到这个event,为什么我这边就要用这个，我用的是chrome浏览器
追答
看看视频中是不是使用的a标签，如果是的话，有没有写href属性。只要a标签不写href属性，也不会出现跳转。注意不是href="",而是不写href属性
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
