首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用jquery激活侧边栏菜单?

要使用jQuery激活侧边栏菜单,首先需要确保已经在项目中引入了jQuery库。接下来,可以通过添加事件监听器来控制菜单的激活状态。以下是一个简单的示例:

  1. HTML结构
代码语言:txt
复制
<ul class="sidebar-menu">
  <li><a href="#" data-target="home">Home</a></li>
  <li><a href="#" data-target="about">About</a></li>
  <li><a href="#" data-target="services">Services</a></li>
  <li><a href="#" data-target="contact">Contact</a></li>
</ul>
  1. CSS样式
代码语言:txt
复制
.sidebar-menu li.active a {
  color: #fff;
  background-color: #333;
}
  1. jQuery脚本
代码语言:txt
复制
$(document).ready(function() {
  $('.sidebar-menu a').click(function(e) {
    e.preventDefault();
    var target = $(this).data('target');
    $('.sidebar-menu li').removeClass('active');
    $(this).parent('li').addClass('active');
  });
});

解释

  1. HTML结构
    • 每个菜单项都有一个<a>标签,使用data-target属性来标识目标页面或内容。
  • CSS样式
    • 通过添加.active类来改变激活菜单项的样式。
  • jQuery脚本
    • 当点击菜单项时,阻止默认的跳转行为。
    • 获取点击菜单项的data-target值。
    • 移除所有菜单项的active类。
    • 为当前点击的菜单项添加active类。

应用场景

这种侧边栏菜单通常用于单页应用(SPA),可以方便地在不同页面或内容之间切换,而不需要重新加载整个页面。

参考链接

通过这种方式,你可以轻松地实现一个简单的侧边栏菜单,并且可以根据需要进行扩展和定制。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Vue-Router根据用户权限添加动态路由(侧边菜单

    动态路由 如果你的网页有管理员、普通用户等多种角色类型,不同的角色能看到的页面/菜单应该是不同的,所以不同的用户登录之后应该监听到不同的动态路由和渲染不同的菜单,这个时候就需要用到动态路由。...简单来说就是根据用户信息获取其对应的权限,生成对应的路由挂载,然后动态渲染有权限的菜单侧边菜单。...实现思路图示: 使用到的路由方法:https://router.vuejs.org/zh/api/index.html#addroute 实现步骤 1、定义静态路由(包括登录、公用页面)、动态路由,..., JSON.stringify(val)); }, // 添加路由菜单 addMenu(state, router) { // 有无存储的菜单值判断 if...但是我在vite3中使用时,动态加载模板字符串的组件时报错,可以使用vite提供的Glob 导入。

    5.3K20

    React 折腾记 - (4) 侧边联动Tabs菜单-增强版(结合Mobx)

    简化了代码逻辑和代码量,重写了一遍,执行逻辑和上个版本有所差异; 上个版本 :React 折腾记 - (3) 结合Mobx实现一个比较靠谱的动态tab水平菜单,同时关联侧边 ---- 效果图 ?.../mobx/mobx-react/react ---- 实现思路 把遍历匹配的扔到状态里面去匹配,可以减少挺多代码量 从布局容器触发匹配(这样初始化就能让动态菜单正常) 借助getDerivedStateFromProps...和getSnapshotBeforeUpdate这类React 16.3+的特性实现侧边联动 动态菜单只操作mobx共享状态 ---- 代码 布局缓存活动路由的关键代码 // 路由容器那个组件...) { this.props.rstat.searchRoute(this.props.location.pathname); } } 侧边...= [this.currentRouteInfo]; } else { return false; } }; // 获取当前激活

    3.7K41

    页面侧边使用自定义模板标签

    我们的博客侧边有四项内容:最新文章、归档、分类和标签云。...函数就这么简单,但目前它还只是一个纯 Python 函数,Django 在模板中还不知道该如何使用它。...Django 1.9 以前的版本如何自定义模板标签这里不再赘述。 归档模板标签 和最新文章模板标签一样,先写好函数,然后将函数注册为模板标签即可。...register.simple_tag def get_categories(): # 别忘了在顶部引入 Category 类 return Category.objects.all() 尽管侧边有...现在运行开发服务器,可以看到侧边显示的数据已经不再是之前的占位数据,而是我们保存在数据库中的数据了。 注意:如果你按照教程的步骤做完后发现报错,请按以下顺序检查。 检查目录结构是否正确。

    1.5K60

    html导航可以展开的下拉菜单,html导航下拉菜单如何制作

    html导航下拉菜单如何制作 发布时间:2020-09-26 15:29:13 来源:亿速云 阅读:88 作者:小新 小编给大家分享一下html导航下拉菜单如何制作,希望大家阅读完这篇文章后大所收获...html导航菜单实例解析: html导航菜单的HTML部分: 我们可以使用任何的HTML元素来打开下拉菜单,如:,或a元素。...使用容器元素(如: )来创建下拉菜单的内容,并放在任何你想放的位置上。 使用 元素来包裹这些元素,并使用CSS来设置下拉内容的样式。...html导航菜单的CSS部分: .dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用position:absolute)的右下角位置。...看完了这篇文章,相信你对html导航下拉菜单如何制作有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

    8.7K20
    领券