若依管理平台PC端如何增加新的字体图标,并且在侧边栏点击切换路由时改变字体图标颜色

1.若依管理平台可以在src/assets/icons/svg这个文件里面添加新的svg文件来引入图标,文件的名字就是你以后要引用图标的名字。

2.svg字体图标的我用的是 iconfont里面的字体图标。

3.这里大家要注意了,左边的字体图标和右边的字体图标是有区别的,假如你使用右边的字体图标的话,当你在侧边导航栏引用这个字体图标的时候,点击切换路由的时候,字体图标的颜色是不会发生改变的,所有我们要使用下载左边的字体图标导入到上面所说的路径里面的。 

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
下面是一个使用 jQuery 实现的侧边导航滑动页面对应导航会跟着改变颜色,点也可以跳转到对应内容的示例代码: HTML: ```html <div class="sidebar"> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <li><a href="#section4">Section 4</a></li> </ul> </div> <div class="main-content"> <section id="section1"> <h2>Section 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </section> <section id="section4"> <h2>Section 4</h2> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </section> </div> ``` CSS: ```css .sidebar { position: fixed; top: 0; left: 0; width: 200px; height: 100%; background-color: #f1f1f1; } .main-content { margin-left: 200px; } .sidebar ul { list-style-type: none; margin: 0; padding: 0; } .sidebar li { margin: 10px 0; } .sidebar a { display: block; padding: 10px; color: #000; text-decoration: none; } .sidebar a.active { background-color: #ccc; } .main-content section { padding: 50px; margin-top: 70px; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } ``` JavaScript: ```javascript $(document).ready(function() { // 高亮当前导航 var sections = $('section'), nav = $('.sidebar'), nav_height = nav.outerHeight(); $(window).on('scroll', function() { var cur_pos = $(this).scrollTop(); sections.each(function() { var top = $(this).offset().top - nav_height, bottom = top + $(this).outerHeight(); if (cur_pos >= top && cur_pos <= bottom) { nav.find('a').removeClass('active'); sections.removeClass('active'); $(this).addClass('active'); nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active'); } }); }); // 平滑滚动到锚点 $('a').on('click', function(e) { if (this.hash !== '') { e.preventDefault(); var hash = this.hash; $('html, body').animate({ scrollTop: $(hash).offset().top - nav_height }, 800, function() { window.location.hash = hash; }); } }); }); ``` 代码解释: 1. 在 HTML 中,我们使用 `<div class="sidebar">` 元素包裹侧边导航,使用 `<div class="main-content">` 元素包裹主要内容,每个主要内容元素使用 `<section>` 标签。 2. 在 CSS 中,我们设置侧边导航的样式,包括固定在左侧、背景颜色字体颜色等。 3. 在 JavaScript 中,我们使用 `$(document).ready()` 方法等待文档加载完成,然后执行以下操作: 1. 使用 `$(window).on('scroll', function() {...})` 监听滚动事件,当页面滚动,高亮当前导航。 2. 使用 `$('a').on('click', function(e) {...})` 监听点事件,当点导航链接,平滑滚动到锚点。 这样就实现了一个简单的侧边导航滑动页面对应导航会跟着改变颜色,点也可以跳转到对应内容的功能。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值