JS做的左侧导航栏

最新推荐文章于 2025-08-10 15:04:07 发布
原创 最新推荐文章于 2025-08-10 15:04:07 发布 · 8.2k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#stylesheet #class #menu #server #div
#iframe

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <link href="../styles/global.css" type="text/css" rel="stylesheet"/>
    <link href="../styles/admin.css" type="text/css" rel="stylesheet"/>
    <style>
        a.herf_style1:link {color: #ff0000; text-decoration: none}
        a.herf_style1:visited {color: #0000ff; text-decoration: none}
        a.herf_style1:hover {text-decoration: underline}
    </style>
    <script type="text/javascript">
  function SwitchMenu(obj)
  {
   if (document.getElementById)
   {
    var el = document.getElementById(obj);
    var ar = document.getElementById("serach_bar").getElementsByTagName("span");
    if (el.style.display != "block")
    {
     for (var i = 0; i < ar.length; i++)
     {
      if (ar[i].className == "serach_bar_submenu")
       ar[i].style.display = "none";
     }
     el.style.display = "block";
    }
    else
    {
     el.style.display = "none";
    }
   }
  }
 </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="serach_bar" class="left">
        <div class="serach_bar_menu" onclick="SwitchMenu('sub1')">广告管理</div>
  <span class="serach_bar_submenu" id="sub1">
   <a class="herf_style1" href="addAdvertise.aspx" target="frame">发布广告</a><br/>           
   <a class="herf_style1" href="AdPosition.aspx" target="frame">广告定位</a><br/>
   <a class="herf_style1" href="AreaAd.aspx" target="frame">广告位置维护</a><br>           
  </span>
  <div class="serach_bar_menu" onclick="SwitchMenu('sub2')">广告位管理</div>
  <span class="serach_bar_submenu" id="sub2">
   <a class="herf_style1" href="AddArea.aspx" target="frame">添加区位</a><br/>           
   <a class="herf_style1" href="AreaManager.aspx" target="frame">区位管理</a><br/>
  </span>
    </div>
    <div>
     <iframe id=Main name=frame src=AreaAd.aspx frameborder=0 
       marginwidth=0 marginheight=0  onclick="return Main_onclick()" style="width: 1024px; height:768px;">
     </iframe>
 </div>
    </form>
</body>
</html>

青峰
关注
js-左侧导航插件-导航栏
03-10
左侧导航插件
JS左侧导航菜单
09-22
初学实用工具源码-非常实用好看的js常用左侧导航菜单，可展开折叠，代码齐全，具有demo演示，css文件，稍改动就能用在自己的程序代码中。
如何使左侧导航栏点击时，切换右侧内容数据，html、js，一二级菜单均可使用
m0_62996549的博客
05-15 6534
2.在你需要点击切换的地方（注：我写的是div块导航，有些是li，不影响的）加上data-src=“ ”，里面写你要跳转的html。3.ok，现在，在你要加的地方，添加上iframe标签，注意src一定要为空（看图片我标注了），因为不知道取到那个页面值。4.方法看得懂吧，通过前面的导航栏点击第几个块，数组就返回第几个页面，然后传src到iframe标签，就能实现了。代码少我就不全部放了，自己敲一遍试试，不会可以问。首先，把这个js加上，不用下载可以直接使用。如何使左侧导航栏点击时，切换右侧内容数据。
记录原生html+js实现左侧导航栏右侧内容页
weixin_53715817的博客
10-17 6616
html+css+javascript+echarts设计的demo，快来学习吧
js实现侧边导航栏展开和折叠
热门推荐
遇见更好的自己
06-09 3万+
效果：左侧导航栏，点击展开，显示子菜单。再次点击，菜单折叠。 代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
实现一个简洁朴素的左侧贴边导航栏html+CSS+javaScript
@zhujj_的博客
08-12 2万+
学习使用HTML、CSS、JavaScript 实现一个简易朴素的贴边竖直导航栏。
原生js——点击左侧导航栏切换内容并按钮高亮显示
m0_72929120的博客
01-04 1107
【代码】js——点击切换按钮高亮显示。
二级菜单导航栏（左侧）
big_beer的博客
04-23 1万+
目标： 实现左侧的二级导航栏 效果图： 项目演示： 点击跳转到演示地址 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>左侧导航栏</title> </head> <style> body{ margin: 0; padding: 0; min-width: 1200px; min-he
左侧菜单导航栏的实现
🌱「码路小匠」：以代码为凿，刻出技术的形状
04-10 2万+
一直困惑左侧菜单导航栏怎么实现的，不过在学过jQuery库后，可以简单的代码就能实现类似于京东，淘宝的左侧菜单导航栏了。 下面是实例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten...
分享一个基于html+css+jquery的左边导航栏
huangmengfeng的博客
07-18 1万+
废话少说，直接上代码，要求装了bootstrap运行需要的js和css文件 先来效果图： 这是html界面 &lt;body&gt; &lt;!-- 左边导航栏 开始--&gt; &lt;div id="menu"&gt; &lt;!--显示菜单--&gt; &lt;div id="open"&gt; &lt;div class="navH&
html左侧导航栏右侧显示内容
无心
08-02 3万+
效果图 代码 复制下来直接运行就可以 <!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.
【vue3】固定上导航栏和左侧导航栏，只显示其他内容在主内容区域
Linux小白一只~正处于学习阶段，觉得我写的还好的请多多给我点赞呀,谢谢大家！！(๑＞ڡ＜)☆
08-15 3872
在elment-plus官网上找到自己需要的布局容器模型Container 布局容器 | Element Plus (element-plus.org)我的侧边栏是菜单，在菜单里面加上router属性，它的子菜单你点击它才能跳转到相应的路由去展示内容；注意一定要主内容区域的标签里加上黄色区域的代码，这样你的其他页面才能在主内容区域显示；
unigu左侧导航栏js框架控制菜单可视：让导航栏交互更流畅
gitblog_06767的博客
05-23 941
unigu左侧导航栏js框架控制菜单可视：让导航栏交互更流畅 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 在现代网页设计中，左侧导航栏作为页面结构的重要组成部分，承担着引导用户浏览和操作的角色。unigu左侧导航栏js框架正是针对这一需求而设计的JavaScript框架资源。它能够帮助开发者轻松实现导航栏的显示与隐藏，优化用户操作体验，并通过简单的CSS调整，快速融...
修改 vscode 左侧导航栏的文字大小 （更新版）
waterHBO的博客
05-31 3820
启用自定义样式, 这一步，很关键！后面修改之后 css 之后，也是再来一遍。启用自定义样式, 这一步，很关键！后面修改之后 css 之后，也是再来一遍。安装 “Custom CSS and JS” 扩展（如果尚未安装）。ctrl + shift + p, 输入 settings.json。找到自定义的 css 文件， 没有的话，就新建一个。此时能实现，左侧和右边的文字一样大。成功之后， 会出现一个警告。
悬浮左侧导航栏html,js + css实现左侧悬浮导航栏
weixin_32767301的博客
05-30 2065
浮在页面上的导航菜单body {font: normal 11px verdana;}ul {margin: 0;padding: 0;list-style: none;width: 150px; /* Width of Menu Items */border-bottom: 1px solid #ccc;}ul li {position: relative;}li ul {position: a...
unigu左侧导航栏JavaScript框架2：深入解析与实践
weixin_42551310的博客
06-23 995
Unigui是一个基于JavaScript框架，用于开发Web界面的应用程序，它旨在提供一种简单直观的方式来创建交互式的网页。该框架具有一系列核心特性，包括：API（Application Programming Interface）在现代的Web应用中扮演着极其重要的角色，它允许开发者在不同的系统和平台之间轻松地交换信息。在unigui框架中，API的使用是通过JavaScript进行的，它为开发者提供了丰富的API来控制和管理界面元素。
【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建
让优秀成为一种习惯！
09-25 2835
Mock.js是一个用于生成随机数据和模拟接口请求的JavaScript库。它可以帮助开发人员在前端开发过程中模拟后端接口的返回数据，以便进行前端页面的开发和测试。
构建高效左侧导航栏的Web开发技术
最新发布
weixin_29717341的博客
08-10 920
ARIA是一系列定义在Web技术中的特殊属性，旨在提供额外的语义信息，帮助残障用户更好地与Web内容交互。这些属性可以明确元素的角色（role），比如按钮、菜单、滑动条等，并描述元素的状态（state），如是否被选中、是否禁用等。通过这样做，ARIA为那些不能看到或听到的用户提供了一个与Web应用交互的方式。-- 示例：带有ARIA属性的按钮 -->在上述代码中，属性表示按钮是否被按下，而aria-label属性提供了一个文本标签，这对于不能看到按钮的用户来说是很有帮助的。
微信小程序实现左侧滑动导航栏
DJxyyy的博客
10-21 4244
微信小程序实现左侧滑动导航栏 1、左侧滑动导航栏图如下 2、这是我们左侧滚动栏的代码 wxml <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}
简单SAP项目开发之导航栏左侧菜单(模拟后台ajax请求)mock.js的使用
licmi的博客
08-24 1395
简单SAP项目开发之导航栏左侧菜单（模拟后台ajax请求）mock.js的使用前言mock.js模拟响应ajax请求安装mock.js依赖配置开发环境及生产环境导入模拟数据测试左侧树收缩功能效果总线的概念 前言 续前篇SAP项目开发之登录注册：链接: https://blog.csdn.net/licmi/article/details/108155421. mock.js模拟响应ajax请求 安装mock.js依赖 npm install mockjs -D 配置开发环境及生产环境 为了只在开发环境
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值