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>

这是我的html代码，当页面加载焦点应该在第二个div上，但是这不起作用，请帮我解决这个问题，提前谢谢。

Answer 1

.focus()不会滚动到指定的div.use：

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

<强> Working Demo

Answer 2

这可能会满足您的需求。首先，将class="borderonload"设置为#container2，然后添加以下CSS：

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

在剧本中：

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

A live demo at jsFiddle

如何在父div中设置div的焦点？

2 个答案: