jquery - 如何使用 jquery 的 .html() 方法将 div 的内容设置为另一个 div

标签 jquery html css

这里我有一些链接<a href> s 和这些 href 链接到 div。当我点击链接时,链接的 div 内容应该出现在另一个 div 中.

为此,我正在尝试使用 jquery 的 .html()方法。 首先,我试图获取单击的 div 的 ID。然后从该 ID 获取该 div 的内容并将 div 的内部内容设置为 dispfe div .但它不起作用....

我该怎么做?

代码:

<!DOCTYPE html>
<html>
<head>
<title>InnerHtml</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

<script>
$(document).ready(function() {
    $("a").click(function(event) {
        var $td = $(event.target.id);
        alert($td);
    });
});
</script>


</head>
<body>

             <a href="#d1" id="f1">Head Light</a><br /> 
             <a href="#d2" id="f2">Hood</a> <br />
             <a href="#d3" id="f3">Wind-shield</a><br /> 
             <a href="#d4" id="f4">Rear wheels</a> <br />
             <a href="#d5" id="f5">Sun roof</a> <br />
             <a href="#d6" id="f6">Front wheels</a> <br />
             <a href="#d7" id="f7">Front hoop</a> <br />
             <a href="#d8" id="f8">Rear mirrors</a> <br />
             <a href="#d9" id="f9">Finishing</a> <br />


    <div id="d1" style="display:none;"> A headlamp is a lamp attached to the front of a     </div>

    <div id="d2" style="display:none;"> he hood bonnet is the hinged cover over the engine  </div>

    <div id="d3" style="display:none;"> The windshield or windscreen of an aircraft, car, bus, </div>

    <div id="d4" style="display:none;"> In automotive design, the automobile layout describes   </div>

    <div id="d5" style="display:none;"> Lorem Ipsum is simply dummy text of the printing </div>

    <div id="d6" style="display:none;"> The term motorcar has formerly also been used </div>

    <div id="d7" style="display:none;"> The weight of a car influences fuel consumption </div>

    <div id="d8" style="display:none;"> Most cars are designed to carry multiple occupants</div>

    <div id="d9" style="display:none;"> Mary Ward became one of the first documented </div>

<br />



<div class="dispfe" style="width:40%;height:400px;border:solid black 1px;">

</div>


</body>
</html>

最佳答案

$(document).ready(function() {
        $("a").click(function(event) {
            $(".dispfe").html($($(this).attr('href')).html());
        });
    });

演示 FIDDLE

关于jquery - 如何使用 jquery 的 .html() 方法将 div 的内容设置为另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21404802/

相关文章:

javascript - 将过滤条件应用于 map 的最简洁方法

javascript - 使用 jquery 切换动画

css - Safari 中的边距与 Chrome 和 Firefox 中的边距截然不同

html - 如何摆脱 haml ul 中的子弹

javascript - 设置按钮来运行不同的脚本

internet-explorer - IE9 的 jQuery "Exception thrown and not caught"问题

javascript - 隐藏所有不包含具有值的 td 的 tr 元素

html - 如何根据父项的右边缘打开超出的子菜单区域?

html - 按钮 :focus style is not working on phone?

php - session 适用于多个网站