• ul动态添加click事件+js滑动条滚动


    jquery 1.7版以前使用live动态绑定事件

    $("#testdiv ul li").live("click",function(){
    });

    jquery 1.7版以后使用on动态绑定事件

    $("#testdiv ul").on("click","li"function() {
         //do something here
    });
    示例: js滑动条滚动
     
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>无标题文档</title>
    <style>
        #rights    {
            right: 0;
            top: 100px;
            width: 100px;
            height: 300px;
            background-color: pink;
            position: fixed;
        }
        #rights a {
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        
    </style>
    
    </head>
    
    <body>
        <div id="rights"><a data-age="a1">a</a><a data-age="a2">b</a><a data-age="a3">c</a></div>
        页面内容1<br />
        页面内容2<br />
        页面内容3<br />
        页面内容4<br />
        页面内容5<br />
        页面内容<br />
        页面内容<br />
        <span id="a1" class="title" >天一广场</span><br />
        页面内容<br />
        页面内容<br />
        页面内容<br />
    
        页面内容<br />
        页面内容<br />
        页面内容<br />
        <span id="a2" class="title" >天一广场</span><br />
        页面内容<br />
        页面内容<br />
        页面内容<br />
        页面内容<br />
        页面内容<br />
        <span id="a3" class="title" >天一广场</span><br />
        页面内容<br />
        页面内容<br />
        页面内容<br />
        页面内容<br />
        页面内容<br />
        页面内容<br />
        页面内容<br />
        页面内容<br />
    </body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $("#rights").on("click","a", function() {
            var d=$(this).attr("data-age");
            console.log(d)
            $('html, body').animate({scrollTop: $('#'+d).offset().top}, 500)     
        });
    
    
    </script>
    </html>

    其他方法:

    https://www.cnblogs.com/nifengs/p/5104763.html

  • 相关阅读:
    BICGSTAB不收敛的坑!!
    python中复制的坑
    安装git
    notion快捷键
    PC微信3.60版小程序无法抓包如何解决(fiddler抓包)
    【施工中】双非考研上岸上海985计算机经历分享
    关于CPU个数、核数、线程数的理解
    几个性能问题的记录
    跨域无效问题解决(java后端方案)
    华硕笔记本,固态硬盘、U盘不能识别!
  • 原文地址:https://www.cnblogs.com/dontes/p/9318683.html
Copyright © 2020-2023  润新知