Jquery 单击链接可在页面其他位置的单独div中显示数据_Jquery_Html_Click_Show Hide

Jquery 单击链接可在页面其他位置的单独div中显示数据

jquery html

Jquery 单击链接可在页面其他位置的单独div中显示数据,jquery,html,click,show-hide,Jquery,Html,Click,Show Hide,我仍在尝试打开一个会员页面，点击一个链接，可以看到该会员的个人资料显示在页面下方的特定分区中。（我不想用框架来做这件事。）下面是我得到的当前版本，使用了来自其他线程的建议，但是当我点击链接时，什么都没有发生。我还是个新手，非常感谢你的帮助。我还没有创建一个fiddle，所以您可以看到整个属性——我注意到早期版本中的一个错误是，我的代码中引用了比fiddle中使用的版本更早的jQuery版本 <!DOCTYPE HTML> <html> <head&

我仍在尝试打开一个会员页面，点击一个链接，可以看到该会员的个人资料显示在页面下方的特定分区中。（我不想用框架来做这件事。）下面是我得到的当前版本，使用了来自其他线程的建议，但是当我点击链接时，什么都没有发生。我还是个新手，非常感谢你的帮助。我还没有创建一个fiddle，所以您可以看到整个属性——我注意到早期版本中的一个错误是，我的代码中引用了比fiddle中使用的版本更早的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>


你能让它工作吗？
$（文档）.ready（函数（））{
$（“.link”）。单击（函数（）{
$（“.hide”）.hide（）；
var dataType=$（this.attr（'data-type'）；
$（“#”+数据类型）.show（）；
});
});
#配置文件{背景：#FFFFCC；边框样式：纯色；边框颜色：#ffd119；填充：15px；宽度：600px；文本对齐：左；位置：绝对；顶部：450px；左：180px；}
.show{显示：块；宽度：600px；}
.hide{display:none；}
.传记片{浮动：左；右边距：15px；宽度：200px；高度：200px；边框样式：纯色；边框颜色：#000099；清晰：左；}
.biostext{显示：内联；左边距：15px；字体系列：乔治亚，衬线；清除：右；}
#bioLinks{float:left；display:block；字体系列：乔治亚，衬线；左边距：25px；右边距：15px；clear:right；}
.link{字体系列：乔治亚，衬线；颜色：#0000ff；文本装饰：无；}
#部分{字体系列：佐治亚，衬线；浮点：左；显示：块；宽度：150px；右边距：15px；边距顶部：15px；文本对齐：右；}
Honcho
Grand Poo Bah
Dogsbody
乔·布洛格斯很棒。
莫妮卡·福克斯正在考虑改变她的生活。
约翰·多伊是个默默无闻的人。

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

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

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

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

删除或重命名重复的ID标记（bio1、bio2、bio3）

Fiddle:

删除或重命名重复的ID标签（bio1、bio2、bio3）

Fiddle:

您对多个元素具有相同的id属性（即#bio1是锚和div的id）。每个元素的Id都应该是唯一的。谢谢，但它仍然不起作用。在检查fiddle（以及社区上一次试图解决此问题的fiddle）时，我注意到fiddle运行在HTML5中，我的文档被指定为HTML4.01。因此，我根据Briggs&@scotsninja修改了代码，并如上所述调整了DOCTYPE。鼓声滚滚……还是娜达。有人有更多的想法吗？W3.ord验证给了我一个错误，因此“第14行，第13列：元素脚本的文本内容不是所需的格式：应为空格、制表符、换行符或斜杠，但找到了$”行和列引用用于关闭脚本。多个元素具有相同的id属性（即#bio1是锚和div的id）。每个元素的Id都应该是唯一的。谢谢，但它仍然不起作用。在检查fiddle（以及社区上一次试图解决此问题的fiddle）时，我注意到fiddle运行在HTML5中，我的文档被指定为HTML4.01。因此，我根据Briggs&@scotsninja修改了代码，并如上所述调整了DOCTYPE。鼓声滚滚……还是娜达。有人有更多的想法吗？W3.ord验证给了我一个错误，因此“第14行，第13列：元素脚本的文本内容不是所需的格式：应为空格、制表符、换行符或斜杠，但找到了$”。行和列引用是脚本的结尾。为什么data（）不是正确的方法？链接使用HTML5数据属性。jQueryAPI说使用data（）检索数据属性；但是

attr（）

比

data（）

更快。

data（）。简言之，attr（）
对于简单数据类型的get操作更快，但是data（）
对于set操作更安全。我已经按照Briggs的建议和建议修改了我的代码，并被告知您的代码是HTML5，我的文档类型是HTML4.01。所以我修改了DOCTYPE和代码，但它在fiddle之外仍然不起作用。进一步确定fiddle中的属性范围对这个新手没有帮助-fiddle做了哪些其他假设而我的代码没有？为什么data（）不是正确的方法？链接使用HTML5数据属性。jQueryAPI说使用data（）检索数据属性；但是attr（）
比data（）
更快。data（）。简言之，attr（）
对于简单数据类型的get操作更快，但是data（）对于set操作更安全。我已经按照Briggs的建议和建议修改了我的代码，并被告知您的代码是HTML5，我的文档类型是HTML4.01。所以我修改了DOCTYPE和代码，但它在fiddle之外仍然不起作用。进一步确定fiddle中的属性范围对这个新手没有帮助-fiddle做出了哪些其他假设，而我的代码没有？我看到这在fiddle中是可行的，但这段代码不会
$(this).attr('data-type');

  <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>

$(document).ready(function() {
    $(".link").click(function() {    
        $(".hide").hide();
        var dataType = $(this).attr('data-type');
        $("#" + dataType).show();
    });
});