Javascript 专注于

我目前有两张画布，分别展示衬衫的正面和背面。我使用了一个列表来选择是要显示正面还是背面。我只能用一个锚点来解决这个问题，但这将意味着滚动到网页中的特定位置。我是否有其他方法来实现它，并在页面加载时将焦点设置到前画布

<ul style="border:0px solid yellow; padding-left:10px;">
    <li id="One">
        <a href="#One" id="first" style="height:20px; width:208px; margin-bottom:-8px; padding-bottom:0px;">
            <span style="margin-left:15px; font-size:medium;">Front Side</span>
        </a>
        <div>
            <canvas id="collage" width="450" height="450" style="margin:0px; padding:0px;"></canvas>
        </div>
    </li>
    <li id="Two">
        <a href="#Two" id="sec" style="height:20px; width:208px; margin-bottom:-8px; padding-bottom:0px;">
            <span style="margin-left:15px; font-size:medium;">Back Side</span>
        </a>
        <div>
            <canvas id="collage2" width="450" height="450" style="margin:0px; padding:0px;"></canvas>
        </div>
    </li>
</ul>

---

您可以为画布提供选项卡索引：

<canvas 
    id="collage" 
    width="450" 
    height="450" 
    style="margin:0px; padding:0px;" 
    tabindex="1">
</canvas>

---

这不起作用，我添加了document.getElementById'collage.focus；但它仍然没有显示任何内容。这就是“聚焦”画布元素的方式，也许您可以详细说明“聚焦”的含义？根据上面的代码，它只显示了2个选项卡，供我选择前画布和后画布。当我加载一个新页面时，不会显示画布，我必须手动单击选项卡以显示画布。我试图消除手动点击并直接显示画布..我将ready函数代码放入标记中，但它仍然没有做任何事情。。唯一有效的方法是我在url中使用了一个页面加载锚。。有什么我遗漏的吗？您需要确保包含对jQuery的引用，这样才能工作，例如'

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#One').click();
});
</script>

<script type="text/javascript">
    function focuscanvas() {
        var canvas = document.getElementById('myGame');
        canvas.focus();
    };
</script>

<button type="button" class="btn btn-default" onclick="focuscanvas()" >
    Focus on Collage
</button>