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

最新推荐文章于 2022-03-28 22:59:43 发布
最新推荐文章于 2022-03-28 22:59:43 发布
阅读量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
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Angular2 router.navigate刷新页面的问题
10-18
今天小编就为大家分享一篇解决Angular2 router.navigate刷新页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
angular+ionic返回上一页并刷新页面
12-09
假定当前页面为editCata页面，要返回的是cataDetail页面。目前我找到两种方法实现返回上一页并刷新，如果以后有其它方法，再继续添加。 1、在editCataCtrl.js中注入$ionicHistory服务. 使用$ionicHistory.goBack()方法即可返回到上一页面。 JS端代码： $scope.goBack=function(){ $ionicHistory.goBack(); } HTML代码： <button class="button button-clear" ng-click="goBack()">返回上一页</button> 如果需要返回上
Angular刷新当前页面的实现方法
10-17
主要介绍了Angular刷新当前页面的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用jQuery,Angular实现登录界面验证码详解
10-19
主要介绍了使用jQuery,Angular实现登录界面验证码详解,需要的朋友可以参考下
angular自定义组件-----侧边菜单栏
here962464的博客
02-11 5225
首先申明一下我用的代码编辑器是webstorm，在webstorm里打开网页调试的时候它会自动模拟一个服务器环境，如果是sublime直接打开会报错，直接双击HTML文件打开也会出错，如果你自己有配置wamp环境就把文件放到www文件夹下打开。 组件效果大概长这样，动画效果用的jQuery。 首先需要用到的有angular.min.js，jquery-1.10.2.js（1.0以上的版本就...
golang:高性能消息队列moonmq的简单使用
weixin_33809981的博客
04-24 271
在上一篇moonmq的介绍中（这里），我仅仅简短的罗列了一些moonmq的设计想法，但是对于如何使用并没有详细说明，公司同事无法很好的使用。 对于moonmq的使用，其实很简单，样例代码在这里，我们只需要处理好broker，consumer以及publisher的关系就可以了。 首先，我们需要启动一个broker，因为moonmq现在只支持tcp的自定义协议，所以broke...
jquery 给当前页面或者跳转后页面对应的导航栏添加选中样式
泥猴桃的博客
10-21 6885
用jquery js 给当前页面或者跳转后页面对应的导航栏添加选中样式是项目中很常见的的效果，几乎每个网站都会用到， 这里有两种效果，一种是直接给当前页面对应的导航栏添加样式，当页面刷新或者跳转页面后样式会消失！ 另一种效果是即使刷新页面或者页面跳转以后导航栏选中样式仍然存在有效！第一种效果：<script type="text/javascript" src="js/jquery.js"></s
angular——侧边导航栏随窗口滚动切换选中，点击对应内容元素滚动到浏览器窗口的可视区域内
Sunshine0508的博客
06-28 716
html <div class="content"> <div class="left"> <div class="navLi" *ngFor="let item of navList;let idx = index" [ngClass]="{'active':num==idx}" (click)="navClick(idx)"> {{item.navName}} </div> </div> &l
利用cookie，实现刷新页面跳转，左侧菜单点击后状态保持不变。
weixin_30952535的博客
03-28 1550
是一个后台关系系统，后台是phyton，后台把左侧菜单都是利用a标签进行跳转，导致菜单点击状态在页面刷新后失效，用户体验不好，被要求改掉。 查了一些资料。利用cookie终于搞定了这个大问题。主要利用 cookie记录存值。 代码贴上去，以防忘掉 $(".nav-item li a").click(function(){ $.cookie("navstati...
Angularjs 左侧导航栏点击变色
tigerOrtiger的博客
12-23 394
Angularjs 左侧导航栏点击变色 写在前面 最近在做一个很小的项目，但是页面啥的都要求五脏俱全，页面标配–导航栏。要求做到点击左侧导航栏后，点击的元素变个色，不然用户自己不知道点了哪一个。也不知道当初脑子是想啥，选择用angularjs写整个项目的前端。【当事人:反正就是后悔】 原生的JS 实现这种很简单，只需要点击元素时，给当前元素添加样式即可，移除其他元素相同的样式。 查来一下angul...
AngularJs + angular-ui-router + bootstrap 实现基础导航栏
0o晓月メ
05-25 5545
index.html 博客 viewport.html 主页 文章 相册 音乐 留言
Ajax实现点击导航栏只切换页面内容，导航栏不变
smx6666668的博客
03-28 2773
<ul class="Menu"> <li class="current" data-id="111">导航1<span></span></li> <li data-id="222">导航2<span></span></li> <li data-id="333"&g...
AngularJS学习-(左侧导航栏筛选、input输入框筛选)
web前端开发
05-17 5711
1、HTML代码             首页         {{nav.classify}}                                                         {{product.name}}                 {{product.describe}}
Angular+Bootstrap3导航菜单
fens的博客
06-26 305
AngularJS体验式编程系列文章，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开...
angularJs实现动态控制侧边栏菜单
砂糖葫芦娃的博客
12-16 6818
应项目的不同所以菜单的层级也不固定，所以在这里我写了5层菜单，哈哈。首先是html代码。//菜单html代码<ul class="page-sidebar-menu"> <li ng-repeat="menu in menus"> <a ui-sref={{menu.router}} style="cursor: pointer" ng-click="getMenuName
使用angularjs写一个导航栏控制器
热门推荐
7
10-03 1万+
这两天用angular写博客前端的时候专门写了个NavController来管理导航栏。下面是代码，暂时功能还比较简单，有需要的话会不断更新。      首先是javascript代码。NavController有两个重点，第一是打开页面时要根据url选择当前栏目，其中的逻辑集中在NavController init的时候；第二是点击栏目时，active点击的栏目，并跳转。 ang
angular整合ng-zorro、左边导航栏
JUST_lOVE_LE的博客
11-10 1431
上一篇已经介绍了angular了，接下来介绍ng-zorro，这个阿里推出的ant design of angular，已经做了一些基础性的工作，并且封装了一些组件，并且也是官方推荐的。 在新建好的angular工程中引入ng-zorro代码如下: ng add ng-zorro-antd 等待安装完成后通过命令 npm start 或者 ng serve -- open 均可以启动工程,页面如下图，这里我展示的是进行修改后的结果，这篇文章也会说明如何修改代码使得左边菜单栏符合我们的实际需求 通过检
angular 1实现的导航菜单切换
李苗苗的博客
01-15 1629
js部分：  $scope.navArr=[{ task:{ title: "我的任务", showAdd: true, data:[ { title:'我的设计院', id:1, ...
angular导航栏作为抽象路由
最新发布
07-16
在 Angular 中，导航栏可以作为一个抽象路由来实现。抽象路由是指在路由配置中定义的一种特殊路由，它不会对应一个具体的组件或页面，而是用于组织和管理其他路由。 以下是如何将导航栏作为抽象路由的步骤： 1. 创建导航栏组件：首先，创建一个导航栏组件，用于显示导航菜单和处理导航逻辑。这个组件不需要对应一个具体的路由路径，因为它将作为抽象路由使用。 2. 定义抽象路由：在路由配置文件中，定义一个抽象路由，例如`{ path: '', component: NavbarComponent, outlet: 'navbar' }`。这里使用一个特殊的`outlet`属性来指定抽象路由的出口名称为`navbar`，以便在其他路由中插入导航栏。 3. 插入导航栏：在其他具体路由的模板中，使用`<router-outlet>`元素来指定插入抽象路由的位置。例如，可以在主模板中添加`<router-outlet name="navbar"></router-outlet>`，这样导航栏就会被插入到主模板的指定位置。 通过以上步骤，导航栏就作为一个抽象路由被集成到应用中了。它可以在不同的页面中显示，并且可以处理导航逻辑。 使用抽象路由的好处是，可以将导航栏与其他具体路由组件解耦，使其独立于具体的页面。这样可以更容易地扩展和维护导航栏功能，同时保持代码的整洁和可读性。 希望以上解答对你有帮助，如果还有其他问题，请随时提问！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值