javascript - 如何通过按下 tab 按钮遍历 div 并显示其全部内容

Question

我想在按下 tab 按钮 时遍历 box 或 div 并显示其全部内容

问题:

1. 显示在按下 tab 按钮时遍历 box
2. 并显示其完整内容 eg: upto hello world15

这是代码笔: 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结构或元素

Answer 1

如评论中所述，您实际上在这里要求两件事。您需要决定您希望如何适应所有内容并实现它。您将放大容器或缩小内容..

我已经删除了对鼠标悬停的 react - 现在一切都会响应 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>