zoukankan      html  css  js  c++  java
  • js实现添加className

    obj.className =' '; //设置为新的
    obj.className +=' ';//在原来的后面加这个
    obj.classList.add(" "); //与第一个等价

    <style>
    #side_btn { 15%;left: 0;bottom: 5%;}
    #side_nav { 25%;left: -34%;top: 15%;transition: left 1s;text-align: center;}
    .nav_float img{100%;vertical-align:top;}
    .nav_float > div {position: fixed;z-index: 9999;}
    #mask{100%;height:100%;background:rgba(0,0,0,.5);position:absolute;top:0;left:0;display:none;}
    .navgation #side_btn{left:-34%;}
    .navgation #side_nav{left:0;}
    </style>
    <section class="nav_float">
        <div id="side_btn">
            <img id="open_side" src="http://img62.ddimg.cn/upload_img/00628/imgapp/branchTo0906.png" />
        </div>
        <div id="side_nav">
            <div class="side_nav_nonelink"><img id="back_main" src="http://img62.ddimg.cn/upload_img/00628/imgapp/0906branch_01.png" /></div>
                <a href="cms://page_id=mix_20170906_sport"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_02.png" /></a>            
                <a href="cms://page_id=mix_20170906_bag"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_03.png" /></a>
                <a href="cms://page_id=mix_20170906_girls"><img src="http://img62.ddimg.cn/upload_img/00628/imgapp/0906branch_04.png" /></a>
                <a href="cms://page_id=mix_20170906_underwear"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_05.png" /></a>
                <a href="cms://page_id=mix_20170906_men"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_06.png" /></a>
                <a href="cms://page_id=mix_20170906_child"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_07.png" /></a>
                <a href="cms://page_id=mix_20170906_shoes"><img src="http://img60.ddimg.cn/upload_img/00628/imgapp/0906branch_08.png" /></a>
                <a href="cms://page_id=mix_20170906_jewel"><img src="http://img62.ddimg.cn/upload_img/00628/imgapp/0906branch_09.png" /></a>
                <span><img src="http://img63.ddimg.cn/upload_img/00628/imgapp/0906branch_10.png"/></span>
            </div>
    </section>
    <section id="mask"></section>

    <script type="text/javascript">
    var oSlideBtn = document.getElementById("side_btn"),
        oSideNav = document.getElementById("side_nav"),
        oMask = document.getElementById("mask"),
        _left= oSideNav.style.left;

    oSlideBtn.onclick = function(){
        this.parentNode.className+=" navgation";
        oMask.style.display="block";

    }
    oMask.onclick = function(){
         this.style.display="none";
         oSlideBtn.parentNode.className="nav_float";
    }

    </script>

  • 相关阅读:
    【ABAP系列】SAP ABAP OOALV 动态设置单元格可否编辑
    【HANA系列】SAP HANA使用XS和HTTP创建proxy
    【HANA系列】SAP HANA SLT在表中隐藏字段并传入HANA的方法
    【BW系列】SAP 讲讲BW/4 HANA和BW on HANA的区别
    【HANA系列】SAP HANA 2.0 SPS00 SDA(Smart Data Access)连接Hadoop
    【BW系列】SAP BW on HANA 迁移问题
    【HANA系列】SAP HANA行列转换
    【HANA系列】SAP ECLIPSE中创建ABAP项目失败原因解析
    开放-封闭原则
    单一职责原则
  • 原文地址:https://www.cnblogs.com/water-wf/p/8514119.html
Copyright © 2011-2022 走看看