如何在父div内为div设置焦点？

Question

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#container2").focus();
        });
    </script>
</head>

<body>
    <div id="mainwrapper">
        <!-- container1 -->
        <div id="container1" 
             style="height:100px;width:299px;">
            First Lorem Ipsum is simply dummy text1 
        </div>

        <!-- container2 -->
        <div id="container2"  style="height:100px;width:299px;">
            Second Lorem Ipsum is simply dummy text2
        </div>

    </div>
</body>

this is my html code,when page loads focus should on second div,but this is not working ,help me how to do this,thanks in advance. 这是我的html代码，当页面加载时应将焦点放在第二个div上，但这不起作用，请提前谢谢我。

Answer 1

.focus() is not going to scroll to specified div.use: .focus()不会滚动到指定的div.use：

$(document).ready(function() {
   $('html, body').animate({ scrollTop: $('#container2').offset().top }, 'slow');
});

Working Demo 工作演示

Answer 2

This probably does what you need. 这可能会满足您的需求。 At first, set class="borderonload" to #container2 , then add the CSS below: 首先，将class="borderonload"为#container2 ，然后添加以下CSS：

#mainwrapper div:hover, .borderonload {
    border: 2px solid #aaf;
}

In script: 在脚本中：

$('#mainwrapper').on('mousemove', function (e) {
    var $cont2 = $('#container2');
    if (e.target !== $cont2) {
        $cont2.removeClass('borderonload');
        $('#mainwrapper').off('mousemove');
    }
});

A live demo at jsFiddle . jsFiddle上的现场演示。

如何在父div内为div设置焦点？

问题描述

2 个解决方案

解决方案1
0 2014-04-03 14:40:15

解决方案2
0 已采纳 2014-04-03 15:34:49

如何在父div内为div设置焦点？

问题描述

2 个解决方案

解决方案1 0 2014-04-03 14:40:15

解决方案2 0 已采纳 2014-04-03 15:34:49

解决方案1
0 2014-04-03 14:40:15

解决方案2
0 已采纳 2014-04-03 15:34:49