stackoom
  简体   繁体   中英

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

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

Question

i wanted to traverse through box or div on press of tab button and show its full content

question:

  1. show to traverse through the box on press of tab button
  2. and show its full content for eg: upto hello world15

here is 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>

Note: without changing html structure or element

3 answers

solution1
 2  2018-08-11 04:48:31

As mentioned in the comments, you're actually asking for two things here. You'll need to decide how you'd like to fit all of the content and implement that. You'll either enlarge the container or shrink the content..

I've removed the reaction to mouse hover - everything now happens in response to the tab key. Note that shift-tab hasn't been implemented: you can only navigate in one direction. You could easily make the mouseover/mouseout handlers toggle a class as well. This would allow you to use either/both keys and mouse for nav. 

 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>

solution2
 1  2018-08-11 05:12:39

In addition to the answers, here is solution that solves the 2 of your problems - While retaining hover using mouse

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>

solution3
 0  2018-08-11 04:03:13

This is similar to jQuery: keyup for TAB-key? but with the added twist of cycling.

So first, to capture the tab key, add this in the $(document).ready(function(){ }); 

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

To cycle through the elements there are many approaches you could take. For example, set a variable at the top of your script to hold the current index: 

var _elementIndex = 0;

Also, you'll need an object to hold the jQuery object: 

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

Then your CycleElements() could look like this: 

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;
    }
}

I hope that gets you over the hump? Can you be more specific about the expected behavior?

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Traverse through div elements using tab index How to show this content without press the button? How to show a form under a div depending on button press Show full content if div is fixed How to traverse through the children div recursively jQuery change content of div with button press ( include() ) Tab through a table inside content editable div? How to check selected option, grab an array value and write its value in a div with the press of a button? focus to image button through jquery on Tab key press not working Show more button to increase content to full size
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM