Переключение div-а с помощю таб-а без js
Здравствуйте, если 2 раза нажат таб window1 скроется и будет отображатся window2? Почему ето приисходит и как ето исправить
<!DOCTYPE html>
<body>
<div class="body">
<div>
<button>Window1</button>
</div>
<div>
<button>Window2</button>
</div>
</div>
</body>
<style>
.body {
display: flex;
flex-direction: row;
width: 100%;
position: relative;
overflow: hidden;
}
.body>div {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 100%;
}
</style>
</html>
|
fori,
в каком браузере? |
Что именно исправить?
Что должно получиться? По первому tab фокус передается на Window1, по второму на Window2 и он сдвигается в поле зрения. Но т.к у вас стоит overflow: hidden, то вы не видите , что Window1 не "пропал", а просто сдвинулся влево. |
Вложений: 1
Я упростил код до такого
<!DOCTYPE html>
<body>
<div class="frame">
<div class="body">
<div class="page0">
<button>111111111111111111111</button>
</div>
<div class=" page1">
<button>2222222222222222222222222</button>
</div>
</div>
</div>
<style>
.frame {
background: red;
}
.frame .body {
width: 100%;
position: relative;
overflow: hidden;
height: 5vmin;
}
.frame .body>div {
width: 100%;
position: absolute;
}
.page0 {
left: 0;
opacity:1;
}
.page1 {
left: 100%;
opacity:0;
}
</style>
</body>
</html>
Я хочу чтоб одно окно (на котором могут быть кнопки и тд) могло быть в стороне с нулевой видимостю, о одно отображалось. Вызывая событие я хочу иметь возможность програмно сдвигать окна и изменять прозрачность и ето работает, но нажатие табов ломает все |
Цитата:
|
Вы имеете ввиду поставить tabindex="-1" всем childNodes что в диве-окне?
Или есть другие испособы? |
Цитата:
|
fori,
document.addEventListener( "keydown" , function(event) {
let {target, code} = event;
if(target = target.closest(".body") && code == "Tab") event.preventDefault();
});
|
Спасибо, могу ли я каким-то образом узнать цель таб-а — тоесть если цель таба принадлежит компоненту - тогда e.preventDefault()
|
fori,
не понимаю. |
| Часовой пояс GMT +3, время: 21:24. |