堆棧內存溢出
  簡體   English   中英

如何通過按下Tab鍵遍歷div並顯示其全部內容

[英]How to traverse through div with tab button press and show its full content

 原文  2018-08-11 03:40:21  7   3    javascript/ jquery/ html/ css

問題描述

我想按tab button來遍歷box or div並顯示其全部內容

題：

  1. 顯示通過按tab button遍歷box
  2. 並顯示其完整內容， 例如：upto hello world15

這是codepen： https ://codepen.io/anon/pen/xJMqbb 

 .fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0; background-color:#00506b;} .style_prevu_kit { display:inline-block; border:0; width:196px; height:210px; position: relative; -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1); -ms-transition: all 200ms ease-in; -ms-transform: scale(1); -moz-transition: all 200ms ease-in; -moz-transform: scale(1); transition: all 200ms ease-in; transform: scale(1); overflow: hidden; } .style_prevu_kit:hover { box-shadow: 0px 0px 150px #000000; z-index: 2; -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1.5); -ms-transition: all 200ms ease-in; -ms-transform: scale(1.5); -moz-transition: all 200ms ease-in; -moz-transform: scale(1.5); transition: all 200ms ease-in; transform: scale(1.5); border:2px solid green; } 
 <link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'> <div align="center" class="fond"> <div style="width:1000px;"> <div class="style_prevu_kit" style="background-color:#cb2025;"> <ul> <li>hello world1</li> <li>hello world2</li> <li>hello world3</li> <li>hello world4</li> <li>hello world5</li> <li>hello world6</li> <li>hello world7</li> <li>hello world8</li> <li>hello world9</li> <li>hello world10</li> <li>hello world11</li> <li>hello world12</li> <li>hello world13</li> <li>hello world14</li> <li>hello world15</li> </ul> </div> <div class="style_prevu_kit" style="background-color:#f8b334;"> <ul> <li>hello world1</li> <li>hello world2</li> <li>hello world3</li> <li>hello world4</li> <li>hello world5</li> <li>hello world6</li> <li>hello world7</li> <li>hello world8</li> <li>hello world9</li> <li>hello world10</li> <li>hello world11</li> <li>hello world12</li> <li>hello world13</li> <li>hello world14</li> <li>hello world15</li> </ul> </div> <div class="style_prevu_kit" style="background-color:#97bf0d;"> <ul> <li>hello world1</li> <li>hello world2</li> <li>hello world3</li> <li>hello world4</li> <li>hello world5</li> <li>hello world6</li> <li>hello world7</li> <li>hello world8</li> <li>hello world9</li> <li>hello world10</li> <li>hello world11</li> <li>hello world12</li> <li>hello world13</li> <li>hello world14</li> <li>hello world15</li> </ul> </div> <div class="style_prevu_kit" style="background-color:#00a096;"> <ul> <li>hello world1</li> <li>hello world2</li> <li>hello world3</li> <li>hello world4</li> <li>hello world5</li> <li>hello world6</li> <li>hello world7</li> <li>hello world8</li> <li>hello world9</li> <li>hello world10</li> <li>hello world11</li> <li>hello world12</li> <li>hello world13</li> <li>hello world14</li> <li>hello world15</li> </ul> </div> <div class="style_prevu_kit" style="background-color:#93a6a8;"> <ul> <li>hello world1</li> <li>hello world2</li> <li>hello world3</li> <li>hello world4</li> <li>hello world5</li> <li>hello world6</li> <li>hello world7</li> <li>hello world8</li> <li>hello world9</li> <li>hello world10</li> <li>hello world11</li> <li>hello world12</li> <li>hello world13</li> <li>hello world14</li> <li>hello world15</li> </ul> </div> </div> </div>

注意：不更改html結構或元素

3 個解決方案

解決方案1
 2  2018-08-11 04:48:31

正如評論中提到的，您實際上在這里要求兩件事。 您需要確定如何適合所有內容並實現這些內容。 您將擴大容器或縮小內容。

我已經刪除了對鼠標懸停的反應-現在一切都發生在響應Tab鍵的情況下。 請注意，尚未實現shift-tab：您只能在一個方向上導航。 您可以輕松地將mouseover / mouseout處理程序也切換為一個類。 這將允許您同時使用導航鍵和鼠標。 

 function newEl(tag){return document.createElement(tag)} window.addEventListener('load', onLoaded, false); function onLoaded(evt) { var colourArray = ['#cb2025', '#f8b334', '#97bf0d', '#00a096', '#93a6a8']; document.addEventListener('keydown', onKeydown, false); var container = document.getElementById('container'); for (var i=0, n=colourArray.length; i<n; i++) container.appendChild( generatePanel(colourArray[i]) ); } function generatePanel(bgCol) { var div = newEl('div'); div.style.backgroundColor = bgCol; var ul = newEl('ul'); div.classList.add('style_prevu_kit'); div.appendChild(ul); for (var i=0; i<15; i++) { var li = newEl('li'); li.textContent = `hello world${i}`; ul.appendChild(li); } return div; } function onKeydown(e) { switch (e.keyCode) { case 9: // tab key e.preventDefault(); var selectedDiv = document.querySelector('.style_prevu_kit.active'); if (selectedDiv === null) // none selected. select the first one { document.querySelector('.style_prevu_kit').classList.add('active'); } else { var parent = selectedDiv.parentNode; var nextSibling = selectedDiv.nextElementSibling; selectedDiv.classList.remove('active'); if (nextSibling !== null) // one before the last one was selected nextSibling.classList.add('active'); // so just select the next one else document.querySelector('.style_prevu_kit').classList.add('active'); // last child selected, so select the first child } return false; } } 
 .fond { position:absolute; padding-top:85px; top:0; left:0; right:0; bottom:0; background-color:#00506b; } .style_prevu_kit { display:inline-block; border:0; width:196px; height:210px; position: relative; -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1); -ms-transition: all 200ms ease-in; -ms-transform: scale(1); -moz-transition: all 200ms ease-in; -moz-transform: scale(1); transition: all 200ms ease-in; transform: scale(1); overflow: hidden; } .style_prevu_kit.active { box-shadow: 0px 0px 150px #000000; z-index: 2; -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1.5); -ms-transition: all 200ms ease-in; -ms-transform: scale(1.5); -moz-transition: all 200ms ease-in; -moz-transform: scale(1.5); transition: all 200ms ease-in; transform: scale(1.5); border:2px solid green; } 
  <div align="center" class="fond"> <div id='container' style="width:1000px;"> </div> </div>

解決方案2
 1  2018-08-11 05:12:39

除了答案之外，這里還有解決您的兩個問題的解決方案-使用鼠標保留懸停時

Codepen ： https : //codepen.io/anon/pen/VBgpqr 

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script>
    $(document).ready(function(){

    var classCounter = $('.style_prevu_kit').length; // count of all style_prevu_kit classes
    var activeIndex = 0; //set active index to first style_prevu_kit class

     $('body').keydown(function(e) {
       var code = e.keyCode || e.which; 
       if (code == 9) { // 9 is code for the [tab] key
       e.preventDefault(); // prevents [tab] key default behaviour
          $('.style_prevu_kit').eq(activeIndex-1).removeClass('active');
          $('.style_prevu_kit').eq(activeIndex++).addClass('active');  
          if(activeIndex>classCounter-1){
             activeIndex = 0;
          } // reset active index when it exceeds number of class elements
       }
    });

    $(".style_prevu_kit").on("mouseover", function() {
    console.log($('.style_prevu_kit').index($(this)));
        $('.style_prevu_kit').each(function(){
            $(this).removeClass('active');
        })
        activeIndex = 0; 
    }); //reset Index when manual mouse hover activated

    }) //end document ready

</script>

<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'>

<style>
.fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;
 background-color:#00506b;}

.style_prevu_kit
{
    display:inline-block;
    border:0;
    width:196px;
    height:210px;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   
     overflow: hidden;

}
.style_prevu_kit:hover
{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
    border:2px solid green;
    height: 300px;
}

.active{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
    border:2px solid green;
    height: 300px;
}

</style>

<div align="center" class="fond">
<div style="width:1000px;">

<div class="style_prevu_kit active" style="background-color:#cb2025;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#f8b334;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#97bf0d;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#00a096;">
   <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>
<div class="style_prevu_kit" style="background-color:#93a6a8;">
    <ul>
      <li>hello world1</li>
      <li>hello world2</li>
      <li>hello world3</li>
      <li>hello world4</li>
      <li>hello world5</li>
      <li>hello world6</li>
      <li>hello world7</li>
      <li>hello world8</li>
      <li>hello world9</li>
      <li>hello world10</li>
     <li>hello world11</li>
     <li>hello world12</li>
     <li>hello world13</li>
     <li>hello world14</li>
     <li>hello world15</li>
    </ul>
  </div>

</div>
</div>

解決方案3
 0  2018-08-11 04:03:13

這類似於jQuery：TAB鍵的keyup嗎？ 但又增加了騎行的難度

因此，首先，要捕獲Tab鍵，請將其添加到$（document）.ready（function（）{}）;中。 

$('body').keyup(function(e) {
    var code = e.keyCode || e.which;
    if (code == '9') {
    //This is the magic function
    CycleElements();
    }
 });

要遍歷元素，可以采取多種方法。 例如，在腳本頂部設置一個變量以保存當前索引： 

var _elementIndex = 0;

另外，您將需要一個對象來保存jQuery對象： 

var _elements = $(".style_prevu_kit li") //May need to change the selector depending on what you want to cycle through

然后您的CycleElements（）可能如下所示： 

function CycleElements()
{
    var selectedElement = $(_elements)[_elementIndex++];
    //now what do you want it to do?
    $(selectedElement).css("background","#CCC"); //highlight the <li>

    //And reset the index counter if needed:
    if (_selectedIndex == $(_elements).length){
        _selectedIndex == 0;
    }
}

我希望這能讓您度過難關嗎？ 您可以更詳細地說明預期的行為嗎？

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用標簽索引遍歷 div 元素 如何在不按按鈕的情況下顯示此內容？ 如何顯示div下的表單，具體取決於按下的按鈕 如果div固定，則顯示全部內容 如何遞歸遍歷子級div jQuery 通過按鈕更改 div 的內容（ include() ） 在內容可編輯div內的表格中切換？ 如何檢查選定的選項，獲取數組值並按下按鈕將其值寫入div？ 通過Tab鍵上的jquery聚焦到圖像按鈕不起作用 顯示更多按鈕以將內容增加到全尺寸
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM