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

最新推荐文章于 2022-07-25 15:28:19 发布

weixin_33888907

最新推荐文章于 2022-07-25 15:28:19 发布

阅读量446

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dontes/p/9318683.html

版权

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