如何在javascript中使用keyPressed獲取下一個元素？

我想用功能keyPressed（）爲演示視圖下一部分我喜歡在沒有像jQuery這樣的框架下做到這一點。如何在javascript中使用keyPressed獲取下一個元素？

調用的方法：

document.addEventListener('keydown', (event) => { 
    keyPressed(); 
} 

var onPage=3; 
function keyPressed(){ 
    let sections = document.getElementByTag("section"); 
    onPage++; 
    GOTO: sections[onPage] //the href in the a element would be "../#sectionJJ" 
}

而且在我的HTML有：

<section>content 1 <section> 
<section>content 2<section> 
<section>content 3<section> 
<section id="section4JJ">content 4<section> 
<section>content 5<section>

來源

2017-06-03 user3432681

以及你怎麼去嗎？滾動，顯示，網址等..... – epascarello

什麼是'章節'，以及onPage如何與下一個元素相關？ – brk

GOTO：Sections [onPage]不起作用 – user3432681

在HTML5的元素id可以作爲錨。而跳轉的方式是從字面上導航到#section4JJ。 window.location來救援。對於傳統瀏覽器，例如you must include an<a name="section4JJ"></a>。

如果您點擊yourpage.html#section4JJ並且頁面足夠長，您會注意到它會跳轉。因此，這裏是一個工作示例：

var onPage = 0; 
 
document.addEventListener('keydown', function(){ 
 
    var sections = document.getElementsByTagName("section"); 
 
\t if(onPage < sections.length - 1){ 
 
\t \t onPage++; 
 
\t \t 
 
\t \t //GOTO: sections[onPage] //the href in the a element would be "../#sectionJJ" 
 
\t \t window.location = '#' + sections[onPage].id; 
 
\t } 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 

 
<section id="sectionABC"><h1>content 1</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
 
<section id="sectionDEF"><h1>content 2</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
 
<section id="sectionXUV"><h1>content 3</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
 
<section id="section4JJ"><h1>content 4</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
 
<section id="section5FF"><h1>content 5</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
 

 
</body> 
 
</html>

來源

2017-06-03 03:27:47 Dorival

如何在javascript中使用keyPressed獲取下一個元素？

回答

相關問題