html中href连接显示到本页面中的某一区域

1.本页面链接内容显示到本页面中

1.1部分html内容

<div id="header">
            <h3>当前位置：</h3>
        </div>
        <div id="contain">
            <div class="nav">
                <ul>
                    <li><a href="/" target="htmlform">作者管理</a></li>
                    <li><a href="www.baidu.com"  target="htmlform">读者管理</a></li>
                    <li><a href="https://www.sina.com.cn/" target="htmlform">小说管理</a></li>
                    <li><a href="http://www.cctv.com/" target="htmlform">分类管理</a></li>
                    <li><a href="http://www.people.com.cn/" target="htmlform">增加分类</a></li>
                </ul>
            </div>
            <div id="content">
                <iframe src="./picture.jpg" frameborder="0"  class="iframeContent" name="htmlform"></iframe>
            </div>
        </div>

重点：href中的target和iframe中的name属性名称一样即可

1.2css样式

#header {
	padding-top: 1px;
	padding-right: 2px;
    background-color: #3385FF;
    width: 99%;
    height: 40px;
}

h3 {
    color: white;
    text-align: center;
}


.nav ul li {
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid white;

}
.nav ul li a{
	color: white;

}
.nav {
    float: left;
    width: 12%;
    height: 92%;
    background:  #3385FF;

}

#contain {
    float: left;
    margin-top: 1px;

    height: 100%;
    width: 100%;


}

#content {
    float: left;
    background-color: #123456;
    margin-left: 2px;
    width: 87%;
    height: 100%;


}

.iframeContent{
    position: relative;
    width: 99.5%;
    height: 100%;
}
#wrapper{
	width: 100%;
    height: 100%;

}
html,body{
	width: 100%;
    height: 100%;
    overflow: hidden;
}

2.运行结果