0

我仍在尝试打开会员页面，您可以在其中单击链接以查看该会员的个人简历详细信息显示在页面下方的特定 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>
4

2 回答 2

2

$.data() 不是从 HTML 节点检索属性的正确方法。你会想要使用$.attr() 方法

$(this).attr('data-type');

将返回链接上设置的数据类型属性的值。

于 2013-09-15T01:28:47.790 回答
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();
    });
});

小提琴：http: //jsfiddle.net/V6MTD/

于 2013-09-15T01:47:30.313 回答