Javascript JS如何制作a<；main>；元素在页面加载时关注

我有一个

…Content…

，我正试图将重点放在加载文档时的滚动条上，因为页面的其余部分可以放在整个页面上，并且不会超过该点，因此任何较长的内容都在news div中，我希望确保如果用户希望使用箭头键向下滚动该内容他们不必首先单击元素（我想添加一个漂亮的功能）

尝试一次，只是一个小技巧，在关闭body标签之前添加这个

<script>
$(function(){
   $('#news').click();
});
</script>

$（函数（）{
$（“#新闻”）。单击（）；
});

---

我试图在页面加载后单击新闻部分，以便将焦点放在该部分上。

默认情况下，只有一组有限的元素可以接收实际的“焦点”（主要是“交互式”元素，如链接和表单元素）

其他元素必须首先使用属性使“可聚焦”

<main tabindex="0">…

查看此提琴：（此处添加了

display:block

for

main

，以便于Internet Explorer，默认情况下不会这样做，因此设置

高度

在其他情况下不起作用。）

这适用于当前的Chrome和IE 11；在Firefox中，它在JSFIDLE环境中不起作用–在全屏视图中，它确实起作用

---

在所有这些浏览器中，你应该可以看到

main

元素在小提琴加载后获得红色背景（通过

main:focus{background:#f99；}

），你应该能够使用上下箭头键或page up/page down在其中滚动，不必先点击它。

这根本没有给我任何结果，我也没有做任何其他的尝试。我想可能我的问题不够清楚，我的整个网站都适合屏幕，我的

元素是唯一一个带有滚动条的元素，我想设置它，这样当页面加载时，用户就不必点击元素可以用箭头键滚动正文根本没有滚动条还是什么都没有而且我的浏览器没有返回jquery errorshow这有点烦人我检查了吗？你可能想在你的答案中添加一点解释，至少解释一下这个代码片段是如何以及为什么回答OP问题的，作为对OP以及任何未来读者的一个警告，你的回答有相同的问题。你尝试过我的解决方案吗？我不知道它是否能起作用。我试过了，但没有什么对不起的。我不确定它为什么不起作用，因为我理解这个理论，我想它应该可以解决加载jQuery的问题。

<main tabindex="0">…

var main = document.getElementsByTagName("main")[0];
main.focus();