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

Posted 2020-10-11 Terre

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了非单页模式下修改头部显示效果相关的知识，希望对你有一定的参考价值。

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>

以上是关于非单页模式下修改头部显示效果的主要内容，如果未能解决你的问题，请参考以下文章

非单页的静态文件如何实现多语言切换

炫酷 CSS 背景效果的 10 个代码片段

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

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