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>
  • 相关阅读:
    第一次博客作业
    自我介绍
    第一次个人编程作业
    第一次博客作业
    第一次个人编程作业
    第一次博客作业
    Alpha冲刺
    Alpha冲刺 (2/10)
    Alpha 冲刺 (1/10)
    福大软工 · 第七次作业
  • 原文地址:https://www.cnblogs.com/vali/p/7682732.html
Copyright © 2011-2022 走看看