zoukankan      html  css  js  c++  java
  • 公共文件js加载

    头部:例如

    <header id="header" class="clearfix">
        <a class="col-xs-9"><img src="img/lib/logo.png" alt=""></a>
        <div class="col-xs-3 nav_tit text-right"><i class="ion-navicon"></i></
        <div class="nav_content">
            <ul>
                <li class="active"><a href="">首页</a></li>
                <li><a href="">公司简介</a></li>
                <li><a href="">新闻</a></li>
                <li><a href="">资讯</a></li>
                <li><a href="">导师团队</a></li>
                <li><a href="">项目峰会</a></li>
                <li><a href="">医疗</a></li>
                <li><a href="">视频总汇</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
    </header>

    改为js模板:

    document.write('<header id="header" class="clearfix"><a class="col-xs-9"><img src="img/lib/logo.png" alt=""></a><div class="col-xs-3 nav_tit text-right"><i class="ion-navicon"></i></div><div class="nav_content"><ul><li class=""><a href="">首页</a></li><li><a href="">公司简介</a></li><li><a href="">新闻</a></li><li><a href="">资讯</a></li><li><a href="">导师团队</a></li><li><a href="">项目峰会</a></li><li><a href="">医疗</a></li><li><a href="">视频总汇</a></li><li><a href="">联系我们</a></li></ul></div></header>');
    
    //控制样式
    (function () {
        var header_module  = document.getElementById('header_module');
        var header = document.getElementById('header');
        var nav = header.getElementsByClassName('nav_content')[0];
        var li = nav.getElementsByTagName('li');
        var a = nav.getElementsByTagName('a');
        var index = header_module.getAttribute('data-active');
        li[index].className = 'active';
        a[0].setAttribute('href','index.html');  //添加href
    })();

    引入js文件:注意给标签写上id

    // data-active 为控制导航选中的样式
    <
    script id="header_module" src="js/header.js" data-active="0"></script>

    结束。

    html代码在线压缩:http://tool.oschina.net/jscompress?type=2

  • 相关阅读:
    jenkins更换国内源
    部署jdk和maven
    Prometheus监控Nginx
    Prometheus监控MySQL
    MySql里动态视图的实现
    MySql里split函数的实现
    HTML编码规范
    消弱反驳18招
    Pr2020
    记忆准则
  • 原文地址:https://www.cnblogs.com/lvyueyang/p/6865725.html
Copyright © 2011-2022 走看看