zoukankan      html  css  js  c++  java
  • 右侧导航栏(动态添加数据到list)

    页面样式

    <style>
                .scroll {
                    position: fixed;
                    right: 5%;
                    top: 5em;
                    background: #ccc;
                    display: none;
                }
                
                .scroll ul {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    border: 0;
                }
                
                a {
                    outline: none;
                    text-decoration: none;
                    tap-highlight-color: rgba(0, 0, 0, 0);
                    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
                    -ms-tap-highlight-color: rgba(0, 0, 0, 0);
                    -o-tap-highlight-color: rgba(0, 0, 0, 0);
                    color: #3c3c3c;
                }
            </style>

    页面

    右侧的导航栏的list

    <div class="scroll">
          <ul id="list">                                
          </ul>
    </div>

    js

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function() {
            $(window).scroll(function() {
                if(document.body.scrollTop > 500) {//当滚动条滑倒500px是出现列表
                    $(".scroll").css("display", "block")
                }            
            })        
            var IdList=[];//定义一个空的数组
            var a = $("body h2")//取到整个body里的h2     
            for (var j = 1;j < a.length;j++ ) {//循环出来
                IdList.push(a.eq(j).attr('id'))    //将取到id值push到空数组里
            }
            var result = "";
            for(var i = 0; i < IdList.length; i++) {//循环添加到li标签里
                console.log(IdList[i])//控制台打印出来自己检查
                result += "<li><a href='#" + IdList[i] + "'>" + IdList[i] + "</a></li>"
            }
            $("#list").append(result)//将li插入ul里面
        })
    </script>
  • 相关阅读:
    学习进度条7
    2016年秋季个人阅读计划
    WampServer中MySQL中文乱码解决
    LINK : fatal error LNK1104: 无法打开文件“LIBCD.lib”
    人月神话阅读笔记03
    人月神话阅读笔记02
    个人总结
    人月神话阅读笔记01
    学习进度条15
    学习进度14
  • 原文地址:https://www.cnblogs.com/yinhuaboke/p/7478945.html
Copyright © 2011-2022 走看看