导航跳转后保持选中状态 jquery高亮当前选中菜单

功能需求:
今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后,高亮当前菜单样式。
简单的说,就是我点击导航菜单中的一个栏目,跳转到该栏目下,该栏目菜单也同时高亮(可以是背景色也可以是背景图片)

解决方法:
通过查看实例,我们需要用到JS中的jquery来实现这种效果,也可以通过CSS设置不同页面的a:hover实现效果,不过这显然是比较笨拙的方法。
那么,如何用JS来实现效果呢,实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。
效果图:

代码如下:

[javascript] view plain copy

    1. <script type=”text/javascript” src=”jquery.min.js”></script>
    2. <style>
    3. .menu { padding:0; margin:0; list-style-type:none;}
    4. .menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
    5. .menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
    6. .cur{ background:#D96C00; font-weight:bold;}
    7. </style>
    8. <ul class=”menu” id=”menu”>
    9. <li><a href=”a.html”>首页</a></li>
    10. <li><a href=”b.html”>SEO优化</a></li>
    11. <li><a href=”c.html”>生活娱乐</a></li>
    12. </ul>
    13. <script type=”text/javascript”>
    14. var urlstr = location.href;
    15. //alert((urlstr + ‘/’).indexOf($(this).attr(‘href’)));
    16. var urlstatus=false;
    17. $(“#menu a”).each(function () {
    18. if ((urlstr + ‘/’).indexOf($(this).attr(‘href’)) > -1&&$(this).attr(‘href’)!=”) {
    19. $(this).addClass(‘cur’); urlstatus = true;
    20. } else {
    21. $(this).removeClass(‘cur’);
    22. }
    23. });
    24. if (!urlstatus) {$(“#menu a”).eq(0).addClass(‘cur’); }
    25. </script>
    26. from https://blog.csdn.net/yusirxiaer/article/details/62216550

原文地址:https://www.cnblogs.com/shizhijie/p/9052054.html

时间: 2024-09-27 04:39:50

导航跳转后保持选中状态 jquery高亮当前选中菜单的相关文章

jQuery控制checkbox选中状态但是不显示选中

问题描述:使用jQuery来控制checkbox的选中状态,但是第一次点击出现选中样式,之后点击可以看到checked的属性增加成功但是并没有选 中状态. 问题代码: function chooseAllOrNot(id){ var choose=$("input[name='"+id+"']").attr('checked'); if(choose=='checked'){ $("input[type=checkbox][name='"+id+

jquery实现点击进行跳转后,改点击的元素添加选中的效果

<script type="text/javascript" src="http://www.cnblogs.com/jq.js"></script> .active { color: red; } //html代码 <ul id="tab2"> <li><a href="http://www.cnblogs.com/index.html">首页</a>&

jQuery高亮当前选中菜单

假如页面中有以下菜单 <ul class="nav navbar-nav"> <li class="active"><a href="/index.html">首页</a></li> <li id="archive"><a href="/archive.html">归档</a></li> <li

取消cell的选中状态,当其选中时

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ [tableView deselectRowAtIndexPath:indexPath animated:YES]; //[self performSegueWithIdentifier:@"toplay" sender:nil]; }

UITableView&amp;UICollectionView设置单元格的默认选中状态

1. 场景需求 一个表格视图(或者宫格视图)中,当一个单元格被选中时设置彩色样式,选中其它单元格时设置灰色样式. 2. 一个思路 通过实现选中和非选择的代理,以在适当的时机进行UI更新操作. 3. UITableView 3.1 通过屏幕点击改变的选中状态回调给代理 //选中-(void)tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath;//非选中-(void)tableView:(

关于复选框选中状态的判断

1.checked的选中状态 不设置checked是默认不选被选中的, 一旦设置checked="false"或者checked = false或者checked="true"或者checked = true或者不设置任何值,都会被解释为选中. <input type="checkbox" name="test" id="test1"/> //未被选中 <input type="

实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能

度娘了很多帖子,只说三种状态要用图片替换来做,但没找到有用的例子,被逼自己写了一个 三方控件肯定是很多的,如jstree,可以直接用 由于公司的UDS限制,不能上传图片,只能文字说明了. 就是要在gridview中实现如下效果:一级.二级因为三级没有全部选中而显示半选状态 ?一级    ?二级       三级1        三级2 js↓ $(function(){ BindCheckNode(); $("span[name^='lblCheck']").click(checkBo

jquery获取单选按钮选中的值

在页面上单选按钮的代码: <s:iterator value="@[email protected]"> <input type="radio" <s:if test="key eq record.is_com">checked</s:if> value="${key}" name="record.is_com"/>${value}    </s:ite

复选框与全选框的选中状态的联动

类似在网购时在购物车选择商品时的复选框与全选框的联动事件 对于原型,构造函数之类的还不熟,强行用了一波,结果写得又长又臭. 但总算功能还是做出来了,总要多实践才会变熟的.全部代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=