Question

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    #div1{ /*add styles to div1*/
        width:100%;
        height:90px;
        background-color: black;
        color:orange;
    }
    #div2{ /*add styles to div2*/
        width:30%;
        height:500px;
        background-color: pink;
        color:black;
        float:left;
        padding-top: 20px
    }
    #div3{/*add styles to div3*/
        width:70%;
        height:500px;
        background-color:purple;
        color:black;
        float:right;
        padding-top: 20px
    }
    #div4{/*add styles to div4*/
        width:100%;
        height:30px;
        background-color: gray;
        color:orange;
        float:left;
    }

    </style>
</head>

<body>
<div id="div1">
</div>
<div id="div2"> 
    <h2>Menu Bar</h2>
    <ul>
        <li><a href="link1.html" target="div3">About</a></li>
        <li><a href="link2.html" target="div3">Gallery</a></li>
        <li><a href="link3.html" target="div3">contacts</a></li>
    </ul>   
</div>
<div id="div3" name="div3">
</div>
<div id="div4">
</div>

</body>
</html>

当我点击另一个网页中打开的链接时，我想打开同一网页右侧的3个链接。我使用<a>标记的目标作为div3的名称。 div3是我要打开这些链接的<div>的ID

Answer 1

在以下Fiddle中，我创建了一个针对iframe内#div3的脚本，以便显示您想要的页面。

我已经包含了jQuery库，在代码中添加了iframe，编写了以下脚本：

$(document).on('click', '#div2 a', function(e){
    $('#div3 iframe').attr('src', $(this).attr('href'));
    e.preventDefault();
})

并添加了以下CSS：

#div3 iframe{
    width: 100%;
    height: 100%;
    border: none;
}

希望这有帮助

我想只使用<div>来创建网页，想在同一页面的右侧打开3个链接

1 个答案: