如何導航<li>使用箭頭鍵的元素 - jQuery？

Question

我正在嘗試使用鍵盤箭頭鍵在具有以下結構的列表項之間導航 - 感謝幫助

我寧願不在這里粘貼我自己的代碼，因為它有很多與問題無關的屬性。 我可以在每個選定的項目上添加一個類嗎？

<div class="card-columns">
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item1</li>            
           </a>
           <a href="#">
             <li>Card Item2</li>            
           </a>
           <a href="#">
             <li>Card Item3</li>            
           </a>
        </ul>
     </div>
   </div>
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item3</li>            
           </a>
           <a href="#">
             <li>Card Item4</li>            
           </a>
           <a href="#">
             <li>Card Item5</li>            
           </a>
        </ul>
     </div>
   </div>
</div>

Answer 1

將所有li元素放入一個集合並設置跟蹤變量。 然后為文檔設置一個keydown事件處理程序，該處理程序根據按下的鍵更改跟蹤器變量，並將樣式應用於其集合中具有與跟蹤變量匹配的索引的元素。

有關詳細信息，請參閱下面的內嵌評論：

 // Get all the <li> elements into a collection var listItems = document.querySelectorAll(".card-list li"); // Set up a counter to keep track of which <li> is selected var currentLI = 0; // Initialize first li as the selected (focused) one: listItems[currentLI].classList.add("highlight"); // Set up a key event handler for the document document.addEventListener("keydown", function(event){ // Check for up/down key presses switch(event.keyCode){ case 38: // Up arrow // Remove the highlighting from the previous element listItems[currentLI].classList.remove("highlight"); currentLI = currentLI > 0 ? --currentLI : 0; // Decrease the counter listItems[currentLI].classList.add("highlight"); // Highlight the new element break; case 40: // Down arrow // Remove the highlighting from the previous element listItems[currentLI].classList.remove("highlight"); currentLI = currentLI < listItems.length-1 ? ++currentLI : listItems.length-1; // Increase counter listItems[currentLI].classList.add("highlight"); // Highlight the new element break; } });

 .highlight { background-color:#ff0; }

 <div class="card-columns"> <div class="card"> <div class="card-body"> <ul class="card-list"> <a href="#"> <li>Card Item1</li> </a> <a href="#"> <li>Card Item2</li> </a> <a href="#"> <li>Card Item3</li> </a> </ul> </div> </div> <div class="card"> <div class="card-body"> <ul class="card-list"> <a href="#"> <li>Card Item3</li> </a> <a href="#"> <li>Card Item4</li> </a> <a href="#"> <li>Card Item5</li> </a> </ul> </div> </div> </div>

Answer 2

你的問題很模糊，沒有看到你做了什么，我只能建議你應該研究一下 Javascript 和 onkeypress() 事件處理程序的使用。

你可以通過給它們一個類來獲取<a>標簽的列表，我們稱之為“cardATags”。

var aList = document.querySelectorAll(".cardATags");

我們將從索引 0 開始頁面。

var index = 0;

並將它們設置為當前聚焦的項目，例如

aList[index].focus();

現在在您的onkeypress()事件處理程序中，您可以增加索引並設置下一個焦點項目。

祝你好運。

稍微澄清一下，將類添加到您的代碼中，如下所示：

<div class="card-columns">
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a class="cardATags" href="#">
             <li>Card Item1</li>            
           </a>
           <a class="cardATags" href="#">
             <li>Card Item2</li>            
           </a>
           <a class="cardATags" href="#">
             <li>Card Item3</li>            
           </a>
        </ul>
     </div>
   </div>
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a class="cardATags" href="#">
             <li>Card Item3</li>            
           </a>
           <a class="cardATags" href="#">
             <li>Card Item4</li>            
           </a>
           <a class="cardATags" href="#">
             <li>Card Item5</li>            
           </a>
        </ul>
     </div>
   </div>
</div>

Answer 3

 $('li').eq(0).addClass('active') $('.cardATags').eq(0).focus(); $(document).keydown(function(e) { var li_count=$('li').length; var curent_active=0; var each_counter=0; $('li').each(function(){ if( $(this).hasClass('active')){ curent_active=each_counter; } each_counter++; }); if(e.keyCode == 37) { // left curent_active-=1; }else if(e.keyCode == 39) { // right curent_active+=1; }if(e.keyCode == 38) { // top curent_active-=1; }if(e.keyCode == 40) { // bott curent_active+=1; } if(curent_active==li_count){ curent_active=0; } $('li').removeClass('active'); $('li').eq(curent_active).addClass('active'); });

 .active{ background-color:gray; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Press UP or DOWN or LEFT or RIGHT arrows... <div class="card-columns"> <div class="card"> <div class="card-body"> <ul class="card-list"> <a href="#"> <li>Card Item1</li> </a> <a href="#"> <li>Card Item2</li> </a> <a href="#"> <li>Card Item3</li> </a> </ul> </div> </div> <div class="card"> <div class="card-body"> <ul class="card-list"> <a href="#"> <li>Card Item3</li> </a> <a href="#"> <li>Card Item4</li> </a> <a href="#"> <li>Card Item5</li> </a> </ul> </div> </div> </div>

Answer 4

這可能不是您要找的，但其他人可能會發現我的解決方案有幫助。 鑒於以下列表：

<ul class="dropdown-menu" id="my_ul" >
  <li tabindex="0"> <a href="#"> Project 1 </a> </li>
  <li tabindex="0"> <a href="#"> Project 2 </a> </li>
  <li tabindex="0"> <a href="#"> Project 3 </a> </li>
</ul>

我需要做兩件事才能讓它工作：

1. 將tabindex="0"添加到每個<li> - 這允許列表元素可聚焦（從而允許您使用箭頭鍵進行導航）
2. 我在向下箭頭事件上使用 jQuery 將焦點移到包裝器<ul>的第一個<li>的第一個<a>標記上，例如jQuery("#my_ul > li > a").first().focus(); （其中my_ul是包裝器的 ID <ul> ）。 就我而言，與您的情況不同，我將<a>標簽放在<li> - 不確定這是否有所不同，但認為值得一提。