jquery实现angular左侧导航栏,页面刷新仍选中

最新推荐文章于 2021-12-01 11:11:49 发布
最新推荐文章于 2021-12-01 11:11:49 发布
阅读量4.5k 收藏 3
点赞数
分类专栏： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Take_Dream_as_Horse/article/details/53409620
版权

1、最近帮新来的同事写了一个基于angular项目的左侧导航栏，由于之前的导航采用ng-repeat生成，用angular事件处理，代码量较大

项目用了阿里字体、jquery插件

效果图如下：

2、html代码如下（主要定义的导航的id,路由跳转）


3、js代码（为一级导航、二级导航绑定事件，页面刷新仍选中导航）

注：每次只能有一个导航处于展开状态


Take_Dream
关注
专栏目录
左边是导航栏右边是相应的页面_angular整合ng-zorro、左边导航栏
weixin_39976251的博客
01-26 496
上一篇已经介绍了angular了，接下来介绍ng-zorro，这个阿里推出的ant design of angular，已经做了一些基础性的工作，并且封装了一些组件，并且也是官方推荐的。 在新建好的angular工程中引入ng-zorro代码如下:ng add ng-zorro-antd等待安装完成后通过命令npm start或者ng serve -- open均可以启动工程,页面如下图，这里我...
后台系统中关于左侧导航的制作
静子
12-25 1311
iframe分块引入代码 后台系统通常的布局是 1、header头部（包含网站Logo和名称，用户名，退出，消息） 2、leftNav左侧导航（有些需要根据权限不同用户显示不同的导航） 3、footer脚部门，显示copyright或者联系我们等信息 4、content主要内容部门 点击左侧导航动态切换到对应的页面。对于手头上用的项目，没有使用react和vue或者angular等框架，就用的是基...
给页面导航栏选中栏目添加特殊样式（页面刷新后仍有效）
11-13
给页面导航栏选中栏目添加特殊样式的案例（页面刷新或者跳转到新页面后导航栏的样式仍然有效）
ng中页面刷新之后，导航条还处于选中状态
web_cgh的博客
02-03 858
// 页面刷新之后，导航条还处于选择状态 1.根据导航栏中的url，找到要添加样式的导航栏 http://........./#/m/after_sales_orders/1/afterSalesOrdersCtrl/1/0// var a = $timeout(function () {     var url = /#\/m\/[A-Za-z_]+/.exec($(".uiSref
angularjs左侧菜单
kerr321的博客
10-23 1415
angularjs二级菜单以及路由跳转 html部分 // 页面 <div class="leftMenu"> <!--菜单--> <ul class="navMenu"> <li ng-click="changNavMenu(item,navArr,...
利用cookie，实现刷新页面跳转，左侧菜单点击后状态保持不变。
weixin_30952535的博客
03-28 1589
是一个后台关系系统，后台是phyton，后台把左侧菜单都是利用a标签进行跳转，导致菜单点击状态在页面刷新后失效，用户体验不好，被要求改掉。 查了一些资料。利用cookie终于搞定了这个大问题。主要利用 cookie记录存值。 代码贴上去，以防忘掉 $(".nav-item li a").click(function(){ $.cookie("navstati...
[转]玩转Angular2(4)--制作左侧自动定位菜单
weixin_30505751的博客
02-21 490
本文转自：https://godbasin.github.io/2017/06/02/angular2-free-4-create-sidebar/ 因为项目原因又玩上了Angular2(v4.0+)，《玩转Angular2》系列用于探索一些灵活或者新的用法。本文记录制作左侧菜单，并使用路由自动定位的过程。 调整配置 上一篇有些配置不是很合适，故这里我们先进行调整。 全局注入jQuer...
前端面试题
热门推荐
qq_41887655的博客
08-08 2万+
前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...
destroy重新打开 eayui_EasyUI相关知识点整理
weixin_39953845的博客
12-21 364
EasyUI相关知识整理EasyUI是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。也就是说EasyUI只负责提供界面插件，其内部的实现可以基于三大前端框架或者jQuery。jQuery is a JavaScript library designed to simplify HTML D...
web学习笔记
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
sidebar-menu:基于 Angular UI Bootstrap 的侧边栏菜单
06-15
侧边栏菜单 基于 Angular UI Bootstrap 的侧边栏菜单。
vue笔记详解
weixin_51261234的博客
12-01 5293
vue 文章目录vue第一篇：邂逅vue为什么学习Vuejs？简单的认识一下Vue.jsVue.js安装Vue的初体验Vue中的MVVM创建Vue实例传入的optionsVue的生命周期第二篇：基础语法插值操作1.Mustache2.v-once3.v-html4.v-text5.v-pre6.v-clock绑定属性：1.v-bind介绍和使用v-bind基础v-bind绑定class绑定方式：对象语法绑定方式：数组语法v-bind绑定style绑定方式一：对象语法绑定方式二：数组语法计算属性1.什么是计算
angular自定义组件-----侧边菜单栏
here962464的博客
02-11 5300
首先申明一下我用的代码编辑器是webstorm，在webstorm里打开网页调试的时候它会自动模拟一个服务器环境，如果是sublime直接打开会报错，直接双击HTML文件打开也会出错，如果你自己有配置wamp环境就把文件放到www文件夹下打开。 组件效果大概长这样，动画效果用的jQuery。 首先需要用到的有angular.min.js，jquery-1.10.2.js（1.0以上的版本就...
angularjs路由菜单如何强制刷新？
wyz_666888的博客
11-14 1528
angularjs路由菜单如何强制刷新？ 一ui-sref-opts 测试 二$state.go button style="border:1px solid red;" ng-click="refesh()">刷新button> $scope.refesh=function(){ $state.go('main.routingUnitManger', {id:1},
AngularJS学习-(左侧导航栏筛选、input输入框筛选)
web前端开发
05-17 5760
1、HTML代码             首页         {{nav.classify}}                                                         {{product.name}}                 {{product.describe}}
Angularjs 左侧导航栏点击变色
tigerOrtiger的博客
12-23 427
Angularjs 左侧导航栏点击变色 写在前面 最近在做一个很小的项目，但是页面啥的都要求五脏俱全，页面标配–导航栏。要求做到点击左侧导航栏后，点击的元素变个色，不然用户自己不知道点了哪一个。也不知道当初脑子是想啥，选择用angularjs写整个项目的前端。【当事人:反正就是后悔】 原生的JS 实现这种很简单，只需要点击元素时，给当前元素添加样式即可，移除其他元素相同的样式。 查来一下angul...
angularjs动态侧边栏菜单_Angular-Panels
weixin_39722196的博客
02-15 280
Angular PanelsPure AngularJS based lightweight(1.7KB) Side Panels.DemoInstallationCopy the script and css into your project and add a script and link tag to your page.And add panels container tag to y...
基于shinydashboard搭建你的仪表板（三）
lsxxx2011的专栏
05-24 904
前言 前面已经介绍了shinydashboard框架的标题栏和侧边栏的输入项部分，这节介绍一下侧边栏的菜单项（menu items），侧边栏的菜单项主要用于切换不同...
angular整合ng-zorro、左边导航栏
JUST_lOVE_LE的博客
11-10 1495
上一篇已经介绍了angular了，接下来介绍ng-zorro，这个阿里推出的ant design of angular，已经做了一些基础性的工作，并且封装了一些组件，并且也是官方推荐的。 在新建好的angular工程中引入ng-zorro代码如下: ng add ng-zorro-antd 等待安装完成后通过命令 npm start 或者 ng serve -- open 均可以启动工程,页面如下图，这里我展示的是进行修改后的结果，这篇文章也会说明如何修改代码使得左边菜单栏符合我们的实际需求 通过检
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值