我想只使用 <div> 创建网页，想在同一页面的右侧打开 3 个链接 [关闭]答案

【问题标题】：I want tocreate the web page using only <div>, want to open 3 links in the right side of same page [closed]我想只使用 <div> 创建网页，想在同一页面的右侧打开 3 个链接 [关闭]
【发布时间】：2017-05-02 03:59:42
【问题描述】：

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

【问题讨论】：

您甚至没有具体说明您的问题是什么。如果您遇到问题，请具体说明 - 发布小提琴，解释正在发生的事情，您做了什么等。这不是人们为您工作的地方
你看过使用 IFrame 吗？

标签： html css

【解决方案1】：

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

我已经包含了 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;
}

希望对你有帮助

【讨论】：

抱歉，我在提问时犯了错误。谢谢，iframe 工作了