开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js左边点击右边出内容

基础概念

在JavaScript中，实现左边点击右边出内容的功能通常涉及到事件监听、DOM操作以及可能的异步数据获取。这种交互模式在网页设计中非常常见，用于提升用户体验和页面的动态性。

相关优势

增强用户体验：通过点击左侧导航，右侧内容动态更新，用户无需刷新整个页面即可获取所需信息。
提高页面效率：只加载和显示当前需要的内容，减少了不必要的数据传输和渲染时间。
灵活性强：可以轻松地添加、删除或修改导航项及其对应的内容。

类型与应用场景

静态内容切换：适用于内容量不大且不经常变化的页面。
动态内容加载：适用于需要从服务器获取数据的场景，如实时新闻、论坛帖子等。
单页应用（SPA）：在复杂的单页应用中，这种模式是核心组成部分。

示例代码

以下是一个简单的示例，展示了如何使用原生JavaScript实现左边点击右边出内容的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧导航示例</title>
<style>
  #sidebar { width: 200px; float: left; }
  #content { margin-left: 220px; }
</style>
</head>
<body>

<div id="sidebar">
  <ul>
    <li><a href="#" data-target="home">首页</a></li>
    <li><a href="#" data-target="about">关于我们</a></li>
    <li><a href="#" data-target="contact">联系我们</a></li>
  </ul>
</div>

<div id="content">
  <div id="home" class="page">欢迎来到首页！</div>
  <div id="about" class="page" style="display:none;">这是关于我们的页面。</div>
  <div id="contact" class="page" style="display:none;">请通过此页面联系我们。</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var sidebarLinks = document.querySelectorAll('#sidebar a');
  
  sidebarLinks.forEach(function(link) {
    link.addEventListener('click', function(event) {
      event.preventDefault();
      var targetId = this.getAttribute('data-target');
      
      // 隐藏所有页面
      document.querySelectorAll('.page').forEach(function(page) {
        page.style.display = 'none';
      });
      
      // 显示目标页面
      document.getElementById(targetId).style.display = 'block';
    });
  });
});
</script>

</body>
</html>

可能遇到的问题及解决方法

问题1：点击后内容未更新

原因：可能是事件监听器未正确绑定，或者DOM元素选择器有误。
解决方法：检查JavaScript代码中的选择器和事件绑定逻辑，确保它们正确无误。

问题2：内容加载缓慢

原因：如果内容是从服务器动态获取的，可能是网络延迟或服务器响应慢。
解决方法：优化服务器端的数据处理逻辑，使用缓存机制减少重复计算，或者考虑使用CDN加速静态资源的加载。

问题3：页面布局错乱

原因：可能是CSS样式冲突或JavaScript操作DOM时影响了布局。
解决方法：仔细检查CSS样式表，确保没有全局样式影响到特定元素。同时，审查JavaScript代码中对DOM的操作，避免不必要的重排和重绘。

通过以上方法，可以有效地实现并维护左边点击右边出内容的交互功能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

VUE项目后台管理系统（四）左边菜单动态展示，不仅可以折叠，而且点击不同的菜单，右边展示不同的页面

目录左边菜单动态的展示左边菜单的属性介绍遍历菜单左边菜单折叠效果不同的菜单右面展示不同的页面左边菜单动态的展示首先后端的接口要返回菜单的list集合，是json格式，我使用的是python...这样左边菜单就出来了 ? 左边菜单折叠效果 ? ? 如何实现以上的效果。首先做一个点击的那个区域在菜单的上面加一个div就可以了 ?...点击上面的区域的时候，可以折叠，那么就需要在上面区域的div上面做一个事件，也就是一个方法。点击的时候变为true ? 点击让这个属性转换一下就可以了。...因为是同一个页面，只是右边的展示的不一样的页面，所以我们需要将不同的页面放到右边，所以我们可以将不同页面的路径设置为当前菜单所在页面的路径的子路径，也就是只要设置 ?...之后在右边写一个占位符 ? 以上就实现了点击不同的菜单，右边展示不同的页面

1.4K1 0

点击导航栏，切换div内容（js+css+html）

12.7K2 0

2018年各大互联网前端面试题三（阿里）

三月份有很多朋友辞职跳槽，也遇到了许许多多的面试题，在交流群里和网站上总结了一些常见的面试题，细细分析，其实基本都是万变不离其宗，所有的问题都是从某一技术点的基础出发，综合考量，如果懂得了这项技术的原理所在，题目答起来内容都差不多能答对...说出你觉得自己身上最优秀的能力？说出你未来的规划？你最近有没有什么想要学习的技术？你有什么要问我的？布局相关 position的值有哪些？ css有哪些垂直水平居中方式？...使用css实现一个持续的动画效果右边宽度固定，左边自适应怎么布局？实现水平垂直居中 Flex布局用的多吗？移动端适配怎么做的？你用到了Flex，请问flex怎么设置垂直水平居中？...（从多个方向上去答） JS基本数据类型有哪些？原理 JS 怎么实现一个类。怎么实例化这个类。为什么 var 可以重复声明？四种定位的区别 let与var的区别？...使用addEventListener点击li弹出内容，并且动态添加li之后有效使用js实现一个持续的动画效果只允许使用css，让一个页面原有dom不可见的多种解决方法请给Array本地对象增加一个原型方法

1.2K3 0

搞定大厂算法面试之leetcode精讲13.单调栈

方法1.动态规划动画过大，点击查看 js： var trap = function(height) { const n = height.length; if (n == 0) {//...思路：遍历heights数组，将其中的元素加入单调递减栈，如果当前柱子的高度大于栈顶柱子的高度，不断出栈，相当于找到左边比当前柱子矮的位置，然后每次出栈之后都要累加一下面积。...思路：如果右边存在一个比当前高的柱子，就会形成一个洼地，同理，左边存在一个比当前高柱子，也会形成一个坑，用双指针循环heights数组，判断是否形成洼地，如果能形成洼地，则计算积水量，累加进ans。...]) {//右边的柱子高于左边的柱子计算这个位置的接水量累加进结果 ans += leftMax - height[left]; ++left;...} else { //左边的柱子高于或等于右边的柱子计算这个位置的接水量累加进结果 ans += rightMax - height[right];

7973 0

用javascript分类刷leetcode13.单调栈(图文视频讲解)_2023-02-27

方法1.动态规划动画过大，点击查看 js： var trap = function(height) { const n = height.length; if (n == 0) {//...思路：遍历heights数组，将其中的元素加入单调递减栈，如果当前柱子的高度大于栈顶柱子的高度，不断出栈，相当于找到左边比当前柱子矮的位置，然后每次出栈之后都要累加一下面积。...思路：如果右边存在一个比当前高的柱子，就会形成一个洼地，同理，左边存在一个比当前高柱子，也会形成一个坑，用双指针循环heights数组，判断是否形成洼地，如果能形成洼地，则计算积水量，累加进ans。...]) {//右边的柱子高于左边的柱子计算这个位置的接水量累加进结果 ans += leftMax - height[left]; ++left;...} else { //左边的柱子高于或等于右边的柱子计算这个位置的接水量累加进结果 ans += rightMax - height[right];

6393 0

用javascript分类刷leetcode13.单调栈(图文视频讲解)_2023-02-28

方法1.动态规划动画过大，点击查看 js： var trap = function(height) { const n = height.length; if (n == 0) {//...思路：遍历heights数组，将其中的元素加入单调递减栈，如果当前柱子的高度大于栈顶柱子的高度，不断出栈，相当于找到左边比当前柱子矮的位置，然后每次出栈之后都要累加一下面积。...思路：如果右边存在一个比当前高的柱子，就会形成一个洼地，同理，左边存在一个比当前高柱子，也会形成一个坑，用双指针循环heights数组，判断是否形成洼地，如果能形成洼地，则计算积水量，累加进ans。...]) {//右边的柱子高于左边的柱子计算这个位置的接水量累加进结果 ans += leftMax - height[left]; ++left;...} else { //左边的柱子高于或等于右边的柱子计算这个位置的接水量累加进结果 ans += rightMax - height[right];

6394 0

用javascript分类刷leetcode13.单调栈(图文视频讲解)

空间复杂度O(n)，栈空间最多为n动画过大，点击查看js：const largestRectangleArea = (heights) => { let maxArea = 0 const...：遍历heights数组，将其中的元素加入单调递减栈，如果当前柱子的高度大于栈顶柱子的高度，不断出栈，相当于找到左边比当前柱子矮的位置，然后每次出栈之后都要累加一下面积。...：如果右边存在一个比当前高的柱子，就会形成一个洼地，同理，左边存在一个比当前高柱子，也会形成一个坑，用双指针循环heights数组，判断是否形成洼地，如果能形成洼地，则计算积水量，累加进ans。...{//右边的柱子高于左边的柱子计算这个位置的接水量累加进结果 ans += leftMax - height[left]; ++left;...} else { //左边的柱子高于或等于右边的柱子计算这个位置的接水量累加进结果 ans += rightMax - height[right];

5821 0

搞定大厂算法面试之leetcode精讲8.滑动窗口

(); //判断滑动窗口内是否有重复元素 let i = 0,//滑动窗口右边界 j = 0,//滑动窗口左边界 maxLength = 0; if (s.length...最小覆盖子串（hard）方法1.滑动窗口思路：用左右两个指针遍历s字符串，当滑动窗口中的字符不能覆盖t中的字符时，右指针右移，扩大窗口，把右边的字符加入滑动窗口，当滑动窗口中的字符能覆盖t中的字符时...判断出窗口的字符是否是需要的字符，并且该字符在窗口中的数量是否和need中的字符数量一致判断窗口中和need中符合要求的字符是否一致如果一致则这个窗口形成的子串就是一个异位词复杂度：时间复杂度...(left); } let d = s[left]; left++;//出窗口 if (need[d])...水果成篮 (medium) 动画过大，点击查看思路：用滑动窗口遍历fruits，当有新种类的水果进入窗口时如果窗口中只有一种水果，将这种水果加入arr数组如果有两种水果，更新窗口的左边界，更新arr

5075 0

这个可以动态更新的课程表，我用数据透视表做的！

点击左边的班级，就显示出这个班级的一周课表，而且还统计出班级学科和教师信息。点击左边的教师，就显示出这位教师的一周课表，而且教师教的学科和班级信息也统计出来了。...- 分析 - 左边的切片器，控制中间和右边的表格，数据动态更新。右边的表格，就是普通的数据透视表，这一步很好解决。...中间的表格，有两个问题：一是在数据透视表的值区域显示文本，内容随切片器动态更新；一是有一个标准的格式，“午间休息”把表格上下拆开了。...最后，右边插入数据透视表，设置切片器的”报表连接“。实验成功，成就满满。哈哈，以后各种文字也可以在表格任意摆放，动态更新了。

3.8K2 0

Servlet与Jsp的结合使用实现信息管理系统一

Servlet（Server Applet）是Java Servlet的简称，称为小服务程序或服务连接器，用Java编写的服务器端程序，主要功能在于交互式地浏览和修改数据，生成动态Web内容。...1：首先用IDEA新建一个工程，MyTest 要实现左边这一栏（全部、文档、轮番图），右边是一个网页被单独加载进来了，左边是一个ul，下面放一个轮番图，，右边是用iframe加载。...先创建主文件index.jsphomepage.jsp是左边的全部（点击全部在右边显示） wendang.jsp(点击文档显示在右边) head.jsp用来显示最上面的信息。..."> js/bootstrap.min.js">内容--> <div id="myCarousel" class="carousel slide" style="width:250px;height:200px;bottom:

2.5K9 0

CSDN自定义模块的高度定制

在只允许使用html，不能使用js和css的情况下，也能把CSDN的自定义模块玩出花来设置字体颜色自定义字体颜色使用 font...h4标签换行符使用多个p标签，或者 br标签来换行第一行第二行在p标签中使用br换行要制作一个从左进右出的横幅... 左边进，右边出加图片使用img 标签指定属性src为图片地址即可,可以使用a...标签包裹，以达到点击图片进行跳转的效果 <img src="https://img-blog.csdnimg.cn/20210121192822629.png" alt="20210121192822629

5721 0

你可曾见过如此简单粗暴的JavaScript解说 -- if 判断的正确打开方式？

并且，一旦左边的结果为假，右边的就不执行了。这里就是取了一个巧，因为我只是想要执行右边的表达式，无所谓返回值是什么。那么，如果score 右边的代码。...score < 60){ alert('不及格') ; } if(score >= 60){ alert('及格') ; } 就是说，一旦 ( ) 里面的表达式为真，就执行 { } 里面的内容...如果左边为假，那么就运行右边的，看看右边的结果如何？如果右边为真，就返回真，否则返回假。也就是说，不管右边的结果怎样，只要左边为假了，右边就无论如何会被执行一次的。...当我们点击这个div的时候，就自动将class换成box2。再次点击的时候，就把box2的样式去掉，依此循环。...dom.hasClass(className) && dom.addClass(className) 这句话是不是已经成立了，OK，那么因为右边是 || ，左边都已经成立了，那么我右边的代码是不是可以不执行了呀

6845 0

神器 Markmap！！！

它的缺点就是可视化能力很弱，这就降低了信息的传播效率，毕竟人对于图像化内容的接收程度要强于文本。可视化表达方面，思维导图就很不错。...以下是本文的重点内容对应的思维导图，就是用这款工具生成的。 ? 本文重点工具介绍这款工具叫 markmap[1]。...左边录入 Markdown 文本，右边会实时展示出思维导图。 ? 使用页面 Markdown 语法中的链接，加粗，删除线，斜体，单行代码，代码块，数学公式，转换成思维导图都有相应的视图效果。...vscode 使用插件编辑 Markdown 文本，文件名以 .mm.md 结尾即可使用，并且可以点击右下角「export」按钮导出动态的 html 文件。 ?...引用链接 [1] markmap: https://markmap.js.org/

2.9K1 0

React-Native组件之 Navigator和NavigatorIOS

要实现上面的效果，需要三个文件：第一个页面，第二个页面和一个控制跳转的JS。...height: 40 } }); AppRegistry.registerComponent('Demo', () => Demo); 商品列表ProductList.js...tintColor 导航栏上按钮的颜色 titleTextColor 导航器标题的文字颜色 translucent 布尔值，决定导航条是否半透明(注：当不半透明时页面会向下移动导航栏等高的距离,以防止内容被遮盖...leftButtonTitle:'左边', // 实例化左边按钮 onLeftButtonPress:() => {alert('左边')}, // 左边按钮点击事件...rightButtonTitle:'右边', // 实例化右边按钮 onRightButtonPress:() => {alert('右边')} // 右边按钮点击事件

4.5K7 0

Java个人家乡博客源码

、相册展示，右边是博文的图文混排内容，下面是用户评论回复分页展示，回复是楼中楼，点击用户昵称即可快速回复。...登录状态下，用户可删除自己的评论以及其以下所有的回复，如果是博主，可以删除任何一天评论和回复，收藏文章，关注作者照片墙左边是个人基本信息、相册展示，右边是用户照片分页展示，图片描述，点击图片轮播预览相册左边是个人基本信息...、照片墙缩略图展示，右边是用户相册分页展示登录注册留言左边是个人基本信息展示，右边留言输入框，下面是最近留言展示个人主页个人主页里有个人基本信息、家乡图片轮播、博文、相册、照片墙、留言的综合信息展示，分类导航...则自动放入默认文件夹照片管理分页，删除，编辑照片描述，多选照片移动到其他相册，图片预览留言管理分为谁留言给我，我留言给谁，可根据昵称、内容、回复状态查询，点击回复按钮进行回复，分页展示家乡名片编辑编辑家乡介绍...2.研究内容和要求（1）技术设计要求应用Java Web实现系统的开发，采用MVC设计模式。通过对不同设计模式的分析，选择适当的设计模式以及HTML5、CSS、JS三件套来进行设计。

4570 0

神器 Markmap ！！

它的缺点就是可视化能力很弱，这就降低了信息的传播效率，毕竟人对于图像化内容的接收程度要强于文本。可视化表达方面，思维导图就很不错。...3 工具使用在线版如果你不想安装任何东西，那可以直接浏览器（建议 chrome 浏览器）上访问 https://markmap.js.org/repl 即可仿照官网模板进行转换，如下图。...左边录入 Markdown 文本，右边会实时展示出思维导图。 Markdown 语法中的链接，加粗，删除线，斜体，单行代码，代码块，数学公式，转换成思维导图都有相应的视图效果。...编辑 Markdown 文本，文件名以 .mm.md 结尾即可使用，并且可以点击右下角「export」按钮导出动态的 html 文件。...引用链接 [1] markmap: https://markmap.js.org/ [2] markmap 插件: https://marketplace.visualstudio.com/items?

8633 0

小程序环境搭建与开发工具的简单介绍

笔记内容：小程序环境搭建与开发工具的简单介绍笔记日期：2018-1-03 ---- 下载开发工具和其他产品的开发一样，开发小程序也需要搭建相应的环境，小程序的开发环境很简单，下载个开发工具就可以了。...登录之后点击小程序项目： ? 创建相应的工程，没有AppID的话可以点击 “点此体检” 即可，当然你也可以去注册一个AppID，我这里选择的是不使用AppID： ? ? 创建完成： ?...左边是效果的显示区域，右边是代码的编写区域。当代码修改后保存按Ctrl+s保存时就会自动编译，然后左边就会显示出修改后的效果。这个开发工具还是比较简单的，没有什么复杂的功能。打开调试器： ?...文件树：app.js是编译过的文件，带 ?[sm] 后缀的则是没有编译过的文件： ? Console控制台界面会显示错误信息或者输出信息： ?

1.6K2 0

4篇笔记搞定JavaScript----第一篇

代码标准 Alert:弹出窗口（警告，测试）,经常用于以下： 1）警告显示 2）测试 JS里面的语法注意： 1)在JS里面，所有的符号都必须是英文状态下的符号 2)JS里面，区分大小写 3)建议，在每一行的后面...两种注释方法： 1）//单行注释，在符号”//”后面所有的内容都是注释的内容 2）/*内容*/，在符号”/**/”里面所写的内容都是注释内容 ?...运算符运算符用于执行程序代码运算，大致分为5种类型：算术运算符、连接运算符、关系运算符、赋值运算符和逻辑运算符 1)赋值运算符”=” 赋值运算符,把符号”=”右边的数据赋值给左边的 2)算数运算符”+...5）复合赋值运算符 +=：将右边的值加左边的值然后将结果赋值给左边 -=：将右边的值减左边的值然后将结果赋值给左边 *=：将右边的值乘左边的值然后将结果赋值给左边 /=：将右边的值除左边的值然后将结果赋值给左边...字符串运算符：”+” 将+号左边和右边的数据连接起来，当+左右两边有一边有字符串就可以使用字符串连接。

9111 0

接口测试平台代码实现64: 多接口用例-4

注意这里么的style的设置： ;position:absolute;right:100%; 这部分，是固定位置，并且距离右边界100%，距离右边100%，那么就是这个样子，就好像是藏在了屏幕的左边我们看不到的一样...然后我们点击之后，不但要给div的display属性变为显示，还要给它滑动到屏幕视线里，也就是距离右边界100% - 48%的位置，48%是它自身的宽度。...而是当用户点击不同设置按钮的时候，通过请求获取实时的小用例列表，然后通过js的操作展示在这个div上。...然后我们接受到了这个ret后，解析，清空小div的内容，来换上新的内容即可。思路很清晰，接下来就开始实现忘了我们要展示个标题文案了，就是让人知道我现在打开的是哪个大用例。。。...好了，篇幅关系，本文内容到此结束，下节课我们继续实现吧～

4743 0

原来“神笔马良”的那根“笔”也可以写代码

右边： new pen ：创建一个新的笔（案例）； login in ：登录； sign up ：注册。...点击进入之后，页面提示：页面左边是HTML编辑器部分，这这里不需要进行文档声明以及其他头部head标签的信息，直接将body标签里的具体内容放置进去即可。...点击下一步： ? 页面提示：页面的右边是JS编辑器部分，在这里编写的JS代码会自动的放置到页面文档的后面，不会影响DOM树的解析，所以也不需要加入script标签。...当点击New Pen之后，即可进入代码编写区域，如下图，可以通过切换不同的选项来编写HTML、CSS与JS的代码。 ? 编写HTML代码如下： ? 编写CSS代码如下： ?...本文系HTML5学堂独家内容，转载请在文章开头显眼处注明作者和出处“HTML5学堂(http://www.h5course.com/)”

1.3K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭