zoukankan      html  css  js  c++  java
  • 非单页模式下 修改头部显示效果

    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>
  • 相关阅读:
    CF1051F The Shortest Statement 题解
    CF819B Mister B and PR Shifts 题解
    HDU3686 Traffic Real Time Query System 题解
    HDU 5969 最大的位或 题解
    P3295 萌萌哒 题解
    BZOJ1854 连续攻击游戏 题解
    使用Python编写的对拍程序
    CF796C Bank Hacking 题解
    BZOJ2200 道路与航线 题解
    USACO07NOV Cow Relays G 题解
  • 原文地址:https://www.cnblogs.com/vali/p/7682732.html
Copyright © 2011-2022 走看看