文章作者:Tyan
博客:noahsnail.com
在前端的页面开发中,经常会碰到页面跳转问题,这个跳转指的是页面内部跳转到指定位置,通常是在有滚动条的情况下,网上介绍的方法很多,本文主要是介绍jQuery函数中的一个小trick,.focus()函数。
先来看一下jQuery的官方文档:
上面的文档扯了一堆,半点没看到页面跳转的影子,但是在实际应用中你会发现,如果一个控件调用了.focus()方法,页面会自动跳转到控件所在位置。
举例说明:
如图,这是一个pop up,modal,如果你选中了某一条数据,你想再打开这个pop up时页面直接跳转到选中的这条数据的位置,用.focus()可以这么写:
1 | $('input[name=test]:checked').focus(); |
test是一堆radio的name,:checked
代表查找被选中的那个radio,focus()方法会直接将页面跳转到被选中的这条数据的位置。
注:focus方法使用有个前提,那就是控件不能是disabled,如果控件要设为disabled,那要在控件被disabled之前调用focus方法。
感谢教我这个小trick的Lucas!