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

html左边是菜单右边是内容,左首菜单栏右侧内容相关推荐

微信小程序 - [完整源码] 全屏左右菜单联动效果，左侧分类与右侧内容联动，类似美团饿了么的点餐页面 “左边菜单，右边内容“ 效果（开箱即用的示例源码，代码干净整洁且注释详细）
前言您可能需要:微信小程序 - 外卖点餐的左右联动功能界面(购物车加减商品,购物车自动计算金额等电商功能) 网上的教程样式和逻辑都太乱了(而且 BUG 一堆.各种真机运行不兼容),直接复制下来后代码 ...
Android之解决多语言适配部分TextView内容左对齐和内容一行不排满就到第二行问题
1 问题 1.多语言适配部分TextView内容左对齐 2.内容一行不排满就到第二行问题 2 解决办法问题1.在TextView里面加入下面参数 android:gravity="cent ...
java中菜单的触发事件_javaweb ajax+div实现左边菜单右边内容时点击菜单应该触发事件但是右边没反应...
这样写点击左边菜单时无论怎么点击,叫content那个div都没有内容都不会更新,我猜是不是css的问题这是代码,请问在此基础上要怎么写才能实现左边菜单右边内容呢 JSP Page 22222333 ...
C#上位机与单片机的完美结合（内附有用户登录，注册，截图，温度采集，历史数据展示，左边菜单右边内容展示的主界面）
基于C#的用户登录,注册界面,头像截屏,左侧菜单右边显示内容的主界面,与单片机结合的温度检测,历史数据分析,完美与SQLServer结合 1用户登录界面 2注册界面 3用户头像拍摄截取 4灯光展示 5 ...
管理后台布局-左菜单-右侧内容宽度控制（使用ant design vue)
项目结构如下: 布局实现的代码段 <template><a-layout><a-layout-siderv-model="collapsed":tri ...
从左边列表复制到右边列表html,JQ实现左侧列表内容移动至右侧列表出现的问题...
部分代码如下 $(function(){ //双击选中项,商品移动到右列表 $('#leftList option').dblclick(function(){ $('#leftList option ...
html 整体边距,html内容左右边距怎么设置
在html中,可以使用padding属性设置内容左右边距,只需要给元素设置"padding:0 数值+单位|百分比数值"即可.padding属性设置元素所有内边距的宽度,或者设置各 ...
html文字左右边距怎么设置,html内容左右边距怎么设置
在html中,可以使用padding属性设置内容左右边距,只需要给元素设置"padding:0 数值+单位|百分比数值"即可.padding属性设置元素所有内边距的宽度,或者设置各 ...
2018腾讯内部转岗面试题3——找出数组中比左边大比右边的小的元素
题目: 以时间复杂度 O(n) 从长度为 n 的数组中找出同时满足下面两个条件的所有元素: (1)该元素比放在它前面的所有元素都大: (2)该元素比放在它后面的所有元素都小. 分析: 面试官给的上面冗 ...
JS从左边移动到右边
1.效果图: 2.代码: <html><head></head><body><%@ page language="java" ...

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

html左边是菜单右边是内容,左首菜单栏右侧内容相关推荐

最新文章

热门文章