左右菜单联动

最新推荐文章于 2023-10-18 16:44:49 发布
最新推荐文章于 2023-10-18 16:44:49 发布
阅读量169 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxiangrikui/article/details/130879795
版权
该代码示例展示了如何使用HTML、CSS和JavaScript创建一个具有侧边栏导航和主要内容区域的页面布局。CSS用于设置页面结构，JavaScript处理内容滚动和侧边栏选中状态的更新，实现实时同步效果。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,body{ width: 100%; height: 100%;}
			*{margin: 0; padding: 0; box-sizing:border-box;}
			ul,li{list-style: none; list-style-type: none;}
			.content{display: flex; width: 1000px; height: 100%;  margin: 0 auto;}
			.content .nav{ width: 300px; height: 500px; }
			.content .nav ul li {width: 100%; height: 32px; line-height:32px;  text-align:center; background: #cbefff; margin-bottom: 2px; cursor: pointer;}
			.content .con{ width: calc(100% - 300px);height: 500px; overflow: auto; }
			.content .nav ul li.on{background: #FF0000;}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="nav">
				<ul>
					<li class="on">11111</li>
					<li>22222</li>
					<li>33333</li>
					<li>44444</li>
				</ul>
			</div>
			<div class="con">
				<ul>
					<li id="s1">
						<div style="background-color: #FFF000;">
							11111
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
						</div>
					</li>
					<li id="s2">
						<div style="background-color: #FF0000;">
							22222
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
						</div>
					</li>
					<li id="s3">
						<div style="background-color: aquamarine;">
							33333
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
						</div>
					</li>
					<li id="s4">
						<div style="background-color: blueviolet;">
							44444
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
							<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script src="jquery3.4.1.min.js"></script>
		<script>
			//右侧内容距顶部距离数组
			let list=[];
			for(let i =0;i<$('.con li').length;i++){
				list.push($('.con li').eq(i).offset().top);
			}
			//左侧菜单点击
			$('.nav li').click(function(){
				var index=$(".nav li").index(this);
				$(".con").scrollTop(list[index]);
			});
			//判断当滚动高度大于右侧内容高度时，设置左侧菜单选中
			$(".con").scroll(function(event){
				let scrollHei=$(".con").scrollTop();//实时滚动高度
				let maxhei=$(this)[0].scrollHeight-$(".con").height();//最大滚动高度
				for(var i =0;i<list.length;i++){
					if(scrollHei==maxhei){//滚动到底部默认最后一个菜单选中
						$('.nav li').eq(i).addClass('on').siblings('li').removeClass('on') 
					}else if(scrollHei>=list[i]){
						$('.nav li').eq(i).addClass('on').siblings('li').removeClass('on') 
					}
				}
			});
		</script>
	</body>
</html>

效果图：

 

呜啦啦~~
关注
uniapp 手摸手实现左右菜单联动(vue2)
小白小白从不日别的博客
09-12 284
去获取当前的所有节点集合，再配合 scroll-view 的 scroll-top 属性，使其在点击左侧菜单栏的时候动态赋值右侧scroll-view 的 scroll-top 属性，从而实现点击左侧菜单栏时右侧内容区域进行滚动。
微信小程序 - [完整源码] 全屏左右菜单联动效果，左侧分类与右侧内容联动，类似美团饿了么的点餐页面 “左边菜单，右边内容“ 效果（开箱即用的示例源码，代码干净整洁且注释详细）
王佳斌
05-29 3958
微信小程序全屏左右联动，微信小程序左右联动，微信小程序scroll左右联动，微信小程序左右分类菜单详细教程，微信小程序如何实现左侧菜单右侧内容，微信小程序怎么做美团饿了么点餐界面，微信小程序仿美团外卖点餐页面左右联动，微信小程序左到右联动，微信小程序项目怎么做左侧垂直菜单右侧内容的联动效果，微信小程序scroll-view实现左右联动效果，微信小程序的左右列表联动，小程序微信商品列表，微信小程序实现可左联动也可右联动，小程序左右联动详细示例源码教程，微信小程序左右联动式分类，微信小程序实现购物页面左右联动，
js实现菜单联动
03-09
使用js代码实现了省份和所属城市的联动效果
js实现联动菜单
11-08
用js实现联动菜单省份功能，实现网页上注册时选择省份
Vue2框架，使用js上线目录的左右联动
最新发布
qq_53613764的博客
10-18 425
div class="top">车型选择</div>点击左侧目录时，右侧会自动跳转到相应的内容区域。滑动右侧内容时，左侧目录会跟随内容变化。TabArr: [], //标签小组。"阿尔法-罗密欧","阿尔法-罗密欧",// 点击左侧菜单栏跳转到相应的区域。// 滚动时左边的菜单栏也滚动。-- 车型选择 -->-- 主页配件 -->
用js实现菜单的联动选择
热门推荐
Explorerwen--Javahome
02-23 3万+
看如下例子:先导入两个js文件:看调用的例子:                                   工作类型                                        月薪范围                                                                           
原生JS左右联动效果
Time_Flies_lei的博客
05-01 672
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Title&l...
小程序左右菜单联动效果
03-25
在小程序开发中，实现左右菜单联动效果是一种常见的交互设计，它可以提供用户更加直观的操作体验，尤其是在数据筛选、信息展示等方面。这种效果通常涉及到界面布局、事件处理和数据管理等多个技术点。下面将详细讲解...
Vue实现左右菜单联动实现代码
12-29
本文介绍了Vue实现左右菜单联动实现代码吗，分享给大家，也给自己留个笔记，具体如下： Github 源码传送门： Rain120/vue-study 之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用 Vue 来...
js+vue+jq左右分类联动效果
weixin_45533739的博客
08-25 359
js+vue+jq左右分类联动效果，左侧固定，右侧分类联动的效果。
JS实现横向与竖向两个选项卡Tab联动的方法
10-23
主要介绍了JS实现横向与竖向两个选项卡Tab联动的方法,涉及JavaScript遍历及动态修改页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js左右列表互联
ssy001128的博客
07-17 219
/ console.log('a: ', a, sectionElements)打印出来的内容。Container页面。
js左右联动实现滚动方法
weixin_68658847的博客
11-03 1224
js左右联动实现滚动方法
小程序实现左右菜单联动（-）
Zhooson的博客
01-04 6890
效果 test.wxml 的文件 view class="detail"> view class="content"> view class="menu-container"> scroll-view scroll-y="true" class="scroll-view" scroll-into-view="head-{{indexSize}}"
04.20 js 左右移动，全选反选，省市联动入门应用
金培龙(Long_carol)的专栏
04-20 2353
一：左右移动选择移动       function move(a,b){     var one=document.getElementById(a);  var two=document.getElementById(b);  for(var i=0;i      if(one[i].selected){         var opt=new Option(one[i].text,one[
js实现左右列表
qq_43023549的博客
04-22 343
实现列表左右移动、上下移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右列表</title> <script> function $(id) { ret...
jsp二级联动选择框
lookthesea的专栏
05-20 4768
InfoTab info = (InfoTab) request.getAttribute("info");System.out.println("父地区 id " + info.getParentAreaId());System.out.println("子地区 id " + info.getChildAreaId());System.out.println("父栏目 id " + info.g
js创建联动菜单
聂辉的博客
07-20 305
JavaScript 编程题 按照下列要求，用JavaScript写一个年，月，日的联动菜单。 1、默认显示当前日期； 2、选择年才可以选择月，选择月才可以选择日，并且 2 月的天数要正确； &lt;html&gt;       &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;年月日下拉框...
分类左右联动
weixin_44052574的博客
01-19 503
flFragment public class flFragment extends Fragment implements ClsContract.IclsView ,LeftAdapter.ItemClickListener{ private ClsPresennter clsPresennter; private LeftAdapter leftAdapter; @BindVi...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值