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

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

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

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)


相关推荐

  • 【深入Java虚拟机】之二:Class类文件结构「建议收藏」

    【深入Java虚拟机】之二:Class类文件结构「建议收藏」Java是与平台无关的语言,这得益于Java源代码编译后生成的存储字节码的文件,即Class文件,以及Java虚拟机的实现。不仅使用Java编译器可以把Java代码编译成存储字节码的Class文件,使用JRuby等其他语言的编译器也可以把程序代码编译成Class文件,虚拟机并不关心Class的来源是什么语言,只要它符合一定的结构,就可以在Java中运行。Java语言中的各种变量、关键字和运算符的语义最终都是由多条字节码命令组合而成的,因此字节码命令所能提供的语义描述能力肯定会比Java语言本身更强大,这便为

  • 如何使用Java获取当前时间戳[通俗易懂]

    如何使用Java获取当前时间戳[通俗易懂]要获取Java中的当前时间戳:Timestamptimestamp=newTimestamp(System.currentTimeMillis());//2016-11-1606:43:19.77这是两个Java示例,向您展示如何获取Java中的当前时间戳。(使用Java8更新)1.java.sql.Timestamp获得当前java.sql.Times…

  • 怎么查看git的用户名和密码_git修改用户名密码命令

    怎么查看git的用户名和密码_git修改用户名密码命令转载自:https://www.cnblogs.com/xihailong/p/13354628.html一、查看查看用户名:gitconfiguser.name查看密码:gitconfiguser.password查看邮箱:gitconfiguser.email查看配置信息:$gitconfig–list二、修改修改用户名gitconfig–globaluser.name“xxxx(新的用户名)”修改密码gitconfig–globaluse

  • Java程序设计(基础)- 方法「建议收藏」

    Java程序设计(基础)- 方法「建议收藏」Java程序设计(基础)- 方法

  • 黑马vue电商后台管理系统总结[通俗易懂]

    黑马vue电商后台管理系统总结[通俗易懂]vue电商后台管理系统-阶段总结一、项目技术栈前端前端采用vuecli脚手架搭建框架,使用elementUI美化项目结构环境依赖(开发依赖,运行依赖)富文本编辑器nprogress加载进度条echarts图表展示第三方http库axios后端后端是已经写好了的,采用express搭建的API服务,返回的数据是JSON格式的数据,只需要导入数据库,并配置一下数据库信息,就可以跑起来了,也有对应的api文档数据库数据库采用MySQL5.7

  • PhpStorm 2021.5.1 激活码【在线注册码/序列号/破解码】[通俗易懂]

    PhpStorm 2021.5.1 激活码【在线注册码/序列号/破解码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

发表回复

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

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