html左边是菜单右边是内容,左首菜单栏右侧内容

左侧菜单栏右侧内容

(如有错敬请指点，以下是我工作中遇到并且解决的问题)

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

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

one

dsfsdfsda

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

这是我打出来的效果。

因为我工作中获取左右两侧的内容都是通过接口得到的。

所以只需把页面的界面布置好即可。大概是这样：

打开页面时加载左侧菜单的内容，并加载默认带有active样式的菜单的相应内容。

然后再通过点击左侧内容再向接口获取内容更新到右侧。

左右两侧的滚动条是独立的，滚动时互相不影响。

js效果就略过了。

• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用
• 生活常用

• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果
• 水果

*{

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