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

时间：2018-08-11 03:40:22

标签： javascript jquery html css

我想按box or div浏览tab button并显示其全部内容

问题：

  1. 在按下box时显示要遍历tab button
  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 个答案:

答案 0 :(得分：2)

正如评论中提到的，您实际上在这里要求两件事。您需要确定如何适合所有内容并实现这些内容。您可以扩大容器或缩小内容。

我已经消除了对鼠标悬停的反应-现在所有事情都响应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>

答案 1 :(得分：1)

除了答案之外，这是解决您的两个问题的解决方案-在使用鼠标保留悬停的同时

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

org-adapt-indentation

答案 2 :(得分：0)

这类似于jQuery: keyup for TAB-key?，但增加了循环的次数。

因此，首先，要捕获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;
    }
}

我希望这能让您度过难关？您可以更详细地说明预期的行为吗？

相关问题
最新问题