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


    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>
  • 相关阅读:
    [AWS] Export and Import Data from DynamoDB Table 从 DynamoDB 数据库中导入和导出数据
    [LeetCode] 944. Delete Columns to Make Sorted 删除列使其有序
    [LeetCode] 943. Find the Shortest Superstring 找到最短的超级字符串
    [LeetCode] 942. DI String Match 增减DI字符串匹配
    [LeetCode] 941. Valid Mountain Array 验证山形数组
    [LeetCode] 940. Distinct Subsequences II 不同的子序列之二
    [LeetCode] 939. Minimum Area Rectangle 面积最小的矩形
    [LeetCode] 938. Range Sum of BST 二叉搜索树的区间和
    [LeetCode] 937. Reorder Data in Log Files 日志文件的重新排序
    [LeetCode] 936. Stamping The Sequence 戳印序列
  • 原文地址:https://www.cnblogs.com/vali/p/7682732.html
Copyright © 2020-2023  润新知