html菜单栏点击后处于选中状态,js实现导航菜单点击切换选中时高亮状态

随着用户点击导航或菜单上不同的页面，出现此选项高亮显示或变为一个新的样式是经常用到的。实现它所用的原理就是通过js中的location.href得到当前页面的地址，然后在与导航上的链接地址匹对，相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。

var urlstr = location.href;

//alert((urlstr + '/').indexOf($(this).attr('href')));

var urlstatus=false;

$("#menu a").each(function () {

if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {

$(this).addClass('cur'); urlstatus = true;

} else {

$(this).removeClass('cur');

}

});

if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }

注：需载入jquery.min.js文件

html菜单栏点击后处于选中状态,js实现导航菜单点击切换选中时高亮状态相关推荐

300+Jquery, CSS, MooTools 和 JS的导航菜单资源
如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手.本文要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了. ...
html鼠标点击显示二级菜单内容,怎样操作js实现二级菜单点击显示当前内容
这次给大家带来怎样操作js实现二级菜单点击显示当前内容,操作js实现二级菜单点击显示当前内容的注意事项有哪些,下面就是实战案例,一起来看一下. 最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级 ...
vue复选框默认被选中_vue .js绑定checkbox并获取、改变选中状态的实例
vue .js绑定checkbox并获取.改变选中状态的实例 2019-01-07 编程之家收集整理的这篇文章主要介绍了vue .js绑定checkbox并获取.改变选中状态的实例,编程之家小编觉得挺 ...
Taro button点击切换选中状态
1.引入组件 2.state中设置选中状态 // button按钮的默认选中,0代表选中 state = { currentIndex: 0 } 3.设置class的样式,点击更改选中 selectN ...
checkbox点击切换选中状态
2019独角兽企业重金招聘Python工程师标准>>> function cboxChecked(ele) {$(ele).click(function () {var isChec ...
[Asp.Net Core] Blazor Server Side 项目实践 - 切换页面时保留状态
前言: 这是项目实践系列 , 算是中高级系列博文, 用于为项目开发过程中不好解决的问题提出解决方案的. 不属于入门级系列. 解释起来也比较跳跃, 只讲重点. 因为有网友的项目需求, 所以提前把这些解 ...
FragmentTabHost切换Fragment时保存状态，避免切换Fragment走onCreateView和onDestroyView方法；...
FragmentTabHost这个控件每次切换Fragment,都会走Fragment的onCreateView和onDestroyView方法,多以每次切换都会创建和销毁Fragment实例,先来看 ...
element导航菜单使用vue-router模式选中菜单项没有高亮
1.使用element的导航菜单点击当前菜单时没有高亮,解决方法问题原因: ①.:default-active的值不要写成具体的内容值,要改成$route.path ②.el-menu-item种的 ...
导航跳转后保持选中状态 jquery高亮当前选中菜单
功能需求: 今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后,高亮当前菜单样式. 简单的说,就是我点击导航菜单中的一个栏目,跳转到该栏目下,该栏目菜单也同时高亮(可以是背景色也可以是背景图片) ...

html菜单栏点击后处于选中状态,js实现导航菜单点击切换选中时高亮状态

html菜单栏点击后处于选中状态,js实现导航菜单点击切换选中时高亮状态相关推荐

最新文章

热门文章