我仍在尝试让会员的页面进入,点击链接以查看该成员的生物详细信息显示在页面下方的特定div中。 (我不想使用框架来执行此操作。)下面是我使用其他线程的建议获得的当前版本,但是当我单击链接时没有任何反应。我仍然是新手,并感谢任何帮助。我没有创建一个小提琴,所以你可以看到整个属性 - 我从早期版本中注意到的一个错误是我的代码中的一个jQuery版本比在小提琴中使用的版本更早。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Can YOU get this to work?</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
$(document).ready(function()) {
$(".link").click(function(){
$(".hide").hide();
var dataType = $(this).attr('data-type');
$("#" + dataType).show();
});
});
</script>
<style type="text/css">
#profiles {background:#FFFFCC; border-style:solid; border-color:#ffd119; padding:15px; width:600px;text-align:left;position:absolute; top:450px;left:180px;}
.show {display:block; width:600px;}
.hide {display:none;}
.biopic {float:left; margin-right:15px; width:200px; height:200px; border-style:solid; border-color:#000099;clear:left;}
.biostext {display:inline; margin-left:15px; font-family:Georgia, serif; clear:right;}
#bioLinks {float:left; display:block; font-family:Georgia, serif; margin-left:25px; margin-top:15px;clear:right;}
.link {font-family:Georgia,serif; color:#0000ff; text-decoration:none;}
#Section {font-family:Georgia, serif;float:left; display:block; width:150px; margin-right:15px; margin-top:15px; text-align:right;}
</style>
</head>
<body>
<div id="Section">
Honcho<br>Grand Poo-Bah<br>Dogsbody
</div>
<div id="bioLinks">
<div><a href="#" data-type="bio1" class="link">Joe Bloggs</a></div>
<div><a href="#" data-type="bio2" class="link">Monica Faux</a></div>
<div><a href="#" data-type="bio3" class="link">John Doe</a></div>
</div>
<div id="profiles">
<div id="bio1" class="hide">
<div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/JBloggs.jpg" width="200" height="200" alt="Joe Bloggs"></div>
<div class="biostext">Joe Bloggs is swell.</div>
</div>
<div id="bio2" class="hide">
<div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/MFaux.jpg" width="200" height="200" alt="Monica Faux"></div>
<div class="biostext">Monica Faux is considering some changes in her life.</div>
</div>
<div id="bio3" class="hide">
<div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/JDoe.jpg" width="200" height="200" alt="John Doe"></div>
<div class="biostext">John Doe is an unknown.</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:2)
答案 1 :(得分:1)
删除或重命名重复的ID标签(bio1,bio2,bio3)。
<div><a href="#" data-type="bio1" class="link">Joe Bloggs</a></div>
<div><a href="#" data-type="bio2" class="link">Monica Faux</a></div>
<div><a href="#" data-type="bio3" class="link">John Doe</a></div>
使用scotsninja的回答:
$(document).ready(function() {
$(".link").click(function() {
$(".hide").hide();
var dataType = $(this).attr('data-type');
$("#" + dataType).show();
});
});