zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    MQ消息队列(2)—— Java消息服务接口(JMS)
    MQ消息队列(1)—— 概念和使用场景
    SpringBoot — HelloWorld开发部署
    redis的配置文件介绍
    Redis info 参数详解
    10 分钟彻底理解 Redis 的持久化和主从复制
    Docker Yearning + Inception SQL审核平台搭建
    Inception SQL审核注解
    运行python脚本后台执行
    解决yum [Errno 256] No more mirrors to try
  • 原文地址:https://www.cnblogs.com/dontes/p/9318683.html
Copyright © 2011-2022 走看看