非单页模式下 修改头部显示效果

非单页模式下 修改头部显示效果

大家好,又见面了,我是全栈君。

1. 问题:

  多个页面共享头部,但不是单页引用,在头部导航点击后 页面跳转,浏览器刷新

  本来加上的样式又消失了

2. 解决方法:

  01. 根据页面url 做判断

 02. 似乎可以用localstorage,来存一下状态

3.以下代码只对url 做了判断

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <title>设置资金密码 | 起点网 安全可信赖的比特币交易平台</title> <meta name="keywords" content="比特币,比特币交易平台,比特币价格,莱特币,莱特币交易平台,虚拟货币"/> <meta name="description" content="起点网是中国专业的比特币|BTC交易平台,为您提供实时的比特币行情、莱特币行情、最新的比特币价格、莱特币价格,是国内安全可信赖的虚拟货币交易平台,7*24小时可随时充值提现,秒级交易!" /> <link rel="stylesheet" href="../css/shouye.css"/> <link href="../css/miao.css" rel="stylesheet" media="screen"> <link href="../css/trade.css" rel="stylesheet" media="screen"> <link href="../css/index.css" rel="stylesheet" media="screen"> <link href="../css/page_center.css" rel="stylesheet" media="screen" /> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> </style> </head> <div class="top-nav"> <div class="nav"> <span> <a href="shouye.html"> <img src="../img/logo_03.png" alt=""/> </a> </span> <ul> <li class="atn index"><a href="shouye.html">首页</a></li> <li><a>交易中心</a></li> <li class="select grzx"> <a href="geren.html" target="self">个人中心</a> <div id="sub" class="sub"> <a title="人民币,OPC" href="cny_record.html" target="_blank">我的资产</a> <a title="以太坊,ETH" href="securityCenter.html" target="_blank">安全中心</a> <!-- <a title="以太经典,ETC" href="/etc" target="_blank">交易中心</a>--> </div> </li> <li class="news"><a href="new.html">新闻</a></li> </ul> <p> <span><a href="#"></a></span> <span class="reg"><a href="#">注册</a></span> </p> <div class="clear"></div> </div> </div> </div> </div> <script>
//这里是判断url ,但是还可以扩展
$(function(){ var a = location.href; console.log(a.indexOf('geren')) if(a.indexOf('geren') !=-1){ $('.grzx').addClass('atn'); $('.grzx').siblings('li').removeClass('atn'); }else if(a.indexOf('shouye') !=-1){ $('.index').addClass('atn'); $('.index').siblings('li').removeClass('atn'); } }); // $(function(){ // $(".header .head_nav ul li").click(function(){ // $(".header .head_nav ul li").eq($(this).index()).addClass("cur").siblings().removeClass("cur"); // // }) // }); </script>

 

转载于:https://www.cnblogs.com/vali/p/7682732.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108100.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • postman做模拟服务器_centos7服务器安装教程

    postman做模拟服务器_centos7服务器安装教程postman安装方式:1)浏览器插件方式安装:2)客户端安装:https://www.getpostman.com/apps使用教程:1)界面:2)利用postman发送post请求、参数是json格式3)Get方法和Post方法的区别1.get是从服务器上获取数据,post是向服务器传送数据。2.get安全性非常低,post安全性较高。但是执行效率却比Post方法好。3.POST的安全性要比…

  • EVE-NG模拟器升级并添加H3C设备

    EVE-NG模拟器升级并添加H3C设备EVE-NG模拟器升级并添加H3C系列模板和镜像欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器,可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它…

  • pycharm如何全局搜索

    pycharm如何全局搜索目录Ctrl+N按文件名搜索py文件Ctrl+shift+N按文件名搜索所有类型的文件ctrl+shift+f全局字符串搜索ctrl+shift+a双shift搜索Ctrl+N按文件名搜索py文件ctrl+n可以搜索py文件勾选上面这个框可以搜索工程以外的文件Ctrl+shift+N按文件名搜索所有类型的文件Ctrl+shift+N可以搜索…

  • listnode用法(java list set)

    javaListNodeclassListNode{Eval;//结点值,泛型ListNode<E>next;//下一结点ListNode(Ex){val=this.x;}}创建及遍历链表classListNode{intval;ListNodenext;ListNode(intx){val=this.x;}}ListNodenodestr=newListN

  • visual studio web创作组件安装失败_安装vs2010应用程序错误报告

    visual studio web创作组件安装失败_安装vs2010应用程序错误报告vs2008web创作组件安装失败

  • 什么是中断?_中断方式的特点

    什么是中断?_中断方式的特点中断通常被定义为一个事件,该事件能够改变处理器执行指令的顺序。这样的事件与CPU芯片内外部硬件电路产生的电信号相对应。中断分为同步中断和异步中断。同步中断——同步中断是当指令执行时由控制单元产生

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号