jQuery没有使用弹出式div。当我点击任何Click Me
文本时,会显示弹出div。然后我点击one
或two
,没有任何反应!?如果我点击one
,two
应该会消失,反之亦然。
复制下面的代码并亲自尝试。解决方案是什么?
<html>
<head>
<style type="text/css">
.ratecontainer {
display:block;
float:left;
height:40px;
}
.ratecontainer a {
color:#FFFFFF;
text-decoration:none;
}
.ratebutton1 {
padding:5px;
color:#FFFFFF;
cursor:pointer;
background-color:#59758d;
}
.ratebutton1:hover {
background-color:#4a6f8e;
}
.ratebutton2 {
padding:5px;
color:#FFFFFF;
cursor:pointer;
background-color:#59758d;
}
.ratebutton2:hover {
background-color:#4a6f8e;
}
#info {
position:absolute;
text-align:left;
width:950px;
height:auto;
top:100px;
left:50%;
z-index:20;
margin-left:-475px;
border:1px solid #000000;
background-color:#FFFFFF;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$('.ratebutton1').click(function() {
$('.ratebutton2').hide();
});
$('.ratebutton2').click(function() {
$('.ratebutton1').hide();
});
$('.infobutton').click(function() {
var id = $(this).attr('id');
var row = '#box'+id;
$('#info').css('display','block');
var ninfo = $(row).html();
$('#info').html(ninfo);
});
});
</script>
<div id="info"></div>
<div class="menucontainer"><a id="0" class='infobutton'>Click Me </a></div>
<div style="display:none;" id="box0">
<div class="ratecontainer">
<form action="">
<a class="ratebutton1">One</a><a class="ratebutton2">two</a>
</form>
</div>
</div>
</body>
</html>
答案 0 :(得分:2)
我为您的代码创建了一个存根小提琴:http://jsfiddle.net/guard/P4KYL/
编辑它删除任何与php相关的内容(并在必要时手动放置多个项目)
然后将编辑后的版本发回去,我会检查它有什么问题。
答案 1 :(得分:-2)
$('.ratebutton1').click(function() {
$('.ratebutton2').hide();
});
我相信这是一个问题。您的按钮不是名为.ratebutton1而是名为ratebutton1。取出时间并尝试一下。希望它有所帮助