Issue when navigating in with inner focusable elements
thiagoteles opened this issue · comments
I have a html structure like this:
<div id='home' class='b-content home'>
<div class='col-md-4 col-sm-4 col-xs-12'>
<a href='https://github.com/luke-chang/js-spatial-navigation/issues/link1.php" target="_blank" rel="nofollow' class='focusable'>
<div class='col-md-12'>
<center><img src='img/icon1.png'></center>
<h3 class='text-center'>Link 1</h3>
</div>
</a>
</div>
<div class='col-md-4 col-sm-4 col-xs-12'>
<a href='link2.php' class='test focusable'>
<div class='col-md-12'>
<center><img src='img/icon2.png'></center>
<h3 class='text-center'>Link 2</h3>
</div>
</a>
</div>
<div class='col-md-4 col-sm-4 col-xs-12'>
<a href='link3.php' class='focusable'>
<div class='col-md-12'>
<center><img src='img/icon3.png'></center>
<h3 class='text-center'>Link 3</h3>
</div>
</a>
</div>
<div class='col-md-8 col-sm-12 col-xs-12 Mybtns'>
<div class='col-md-4 col-sm-12 col-xs-12'>
<a class='focusable btn btn-default center-block btn-lg account' href='#'>
<i class='fa fa-info'></i> Link 4</a>
</div>
<div class='col-md-4 col-sm-12 col-xs-12'>
<a class='btn btn-default center-block btn-lg account focusable' href='link4.php'>
<i class='fa fa-clock-o' >
</i> Link 5</a>
</div>
<div class='col-md-4 col-sm-12 col-xs-12'>
<a href='' class='btn btn-default center-block btn-lg'>
<i class='fa fa-sign-out' style='padding-top: 0px;'>
</i> Link 6</a>
</div>
</div>
Its not working and I cant navigate between blocks. If I put the "a" links outside of div its working fine but its broke all my application links and styles.
How can I navigate with this structure?