堆栈内存溢出
  繁体   English   中英

如何通过按下Tab键遍历div并显示其全部内容

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

 原文  2018-08-11 03:40:21  6   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