左侧菜单栏右侧内容

（如有错敬请指点，以下是我工作中遇到并且解决的问题）下一篇文章改进了内容

在网上搜这个内容时，大部分说 左侧a标签然后链接到右侧的iframe框架。有的 用frameset标签实现的，有的 左侧点击时，右侧使用innerHTML/innerText方法加入内容，有的 左侧点击时，右侧隐藏其他div，显示对应内容的div。

我试了其中一个方法（左侧a标签 链接到右侧的iframe框架）

<a href="one.html" target="one">one</a>

<iframe name="one">dsfsdfsda</iframe>

虽然大概实现了这样的效果，但是F12控制器会报错，找不到a标签里的链接。

这是我打出来的效果。


因为我工作中获取左右两侧的内容都是通过接口得到的。
所以只需把页面的界面布置好即可。大概是这样：
打开页面时加载左侧菜单的内容，并加载默认带有active样式的菜单的相应内容。
然后再通过点击左侧内容再向接口获取内容更新到右侧。
左右两侧的滚动条是独立的，滚动时互相不影响。

js效果就略过了。

<div class="wrap">
	<div class="left">
		<ul class="left_main">
			<li class="ma-li active">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
			<li class="ma-li">生活常用</li>
		</ul>
	</div>
	<div class="right">
		<ul class="right_main">
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
			<li class="ma-li">水果</li>
		</ul>
	</div>
</div>

*{
	margin: 0;
	padding: 0;
	list-style: none;
}
html,body{
	height: 100%
}
.wrap{
	height: 100%;
	display: flex;
}
.left{
	width: 30%;
	height: 100%;
	overflow-y: auto;
}
.right{
	-webkit-box-flex: 1;
	flex: 1;

	height: 100%;
	overflow-y: auto;
}
.left_main,.right_main{
	height: 100%;			
	overflow-y: auto;
}
.left li{
	color: #7a7a7a;
}
.right li{
	color: #373737;
}
.ma-li{
	font-size: 16px;
	padding-left: 20px;
	/*height: 45px;*/
	line-height: 45px;
}
.ma-li.active{
	border-left: 5px solid #1657c9;
	padding-left: 15px;
}

另外附上一些链接。
标题：jquery点击左侧菜单右侧推送弹出内容显示效果代码
http://www.17sucai.com/pins/6122.html
标题：左边菜单，点击左边右边内容改变
http://www.cnblogs.com/haiying520/p/5401727.html

更多导航菜单样式：
http://www.freejs.net/daohangcaidan_9.html

转载于:https://www.cnblogs.com/hiuman/p/7347412.html