繁体   English   中英

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

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

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想按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 个回复

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

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

除了答案之外,这里还有解决您的两个问题的解决方案-使用鼠标保留悬停时

Codepenhttps : //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>

这类似于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;
    }
}

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

2 在按钮按下时隐藏并显示div

我有一个JavaScript函数,可根据click事件隐藏和显示div。 它的效果很好,但是每次显示div时,它都会扩展整个英雄区域,即英雄图像, h1文本。 所以一切都随着扩展而跳跃 我需要显示隐藏的div,在不单击该按钮后显示隐藏的div的情况下,在不使背景图像和h1标签位于同 ...

6 如何递归遍历子级div

我有这样的div结构,由于div结构的结束是未知的,因此它将像子代,孙子,大孙子一样反复出现。 所以我的问题是如何递归遍历直到最后一个div。 我找到了这样的解决方案- 遍历Jquery树-嵌套到JSON的无序列表元素 ,但是这里只处理列表标记,但在我的情况下,我希望所有div都作为J ...

7 jQuery 通过按钮更改 div 的内容( include() )

我需要一些基本的帮助,我找不到我的解决方案:( 我尝试在左侧设置带有一些按钮的菜单( menu_kneeboard )。 如果您单击某些内容,它将在content_kneeboard部分中使用include()函数打开另一个 php 文件。 我该怎么做? 如果我使用.text语句(?属性?)它会起 ...

8 如何将一个div的隐藏数据显示到另一个div,并按交叉按钮将其移至实际位置

我在一个项目中工作,遇到了单击加号的地方,数据将隐藏起来,并显示在旁边的div中。 这是代码:View 以及下一个div的代码: 脚本是 所以问题是,我成功地能够将数据发送到下一个div,但是当将十字形图标按到其原始位置时无法移动该div,并且数据不在新的div中,因此 ...

9 如何将按钮链接到另一页上具有div内容的选项卡?

这就是我希望链接一个按钮以在另一页的选项卡中显示与某个div相关的内容的方式,如何使用JQuery做到这一点? 我提供了一张图片/图画,以便您可以理解我的意思。 因此,two.html的按钮必须直接链接以显示one.html,选项卡1,div中的内容,第二个按钮必须链接至one.htm ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM