Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.05.2021, 20:19
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Переключение 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>
Ответить с цитированием
  #2 (permalink)  
Старый 09.05.2021, 20:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

fori,
в каком браузере?
Ответить с цитированием
  #3 (permalink)  
Старый 09.05.2021, 20:57
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,743

Что именно исправить?
Что должно получиться?

По первому tab фокус передается на Window1, по второму на Window2 и он сдвигается в поле зрения. Но т.к у вас стоит overflow: hidden, то вы не видите , что Window1 не "пропал", а просто сдвинулся влево.
Ответить с цитированием
  #4 (permalink)  
Старый 10.05.2021, 16:35
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Я упростил код до такого
<!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>

Я хочу чтоб одно окно (на котором могут быть кнопки и тд) могло быть в стороне с нулевой видимостю, о одно отображалось. Вызывая событие я хочу иметь возможность програмно сдвигать окна и изменять прозрачность и ето работает, но нажатие табов ломает все
Изображения:
Тип файла: gif 2.gif (1.77 Мб, 1 просмотров)

Последний раз редактировалось fori, 10.05.2021 в 16:40.
Ответить с цитированием
  #5 (permalink)  
Старый 10.05.2021, 17:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от fori
но нажатие табов ломает все
так отключите
Ответить с цитированием
  #6 (permalink)  
Старый 10.05.2021, 17:09
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Вы имеете ввиду поставить tabindex="-1" всем childNodes что в диве-окне?
Или есть другие испособы?
Ответить с цитированием
  #7 (permalink)  
Старый 10.05.2021, 17:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от fori
поставить tabindex="-1"
да либо отменить событие по таб программно
Ответить с цитированием
  #8 (permalink)  
Старый 10.05.2021, 17:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

fori,
document.addEventListener( "keydown" , function(event) {
let {target, code} = event;
if(target = target.closest(".body") && code == "Tab") event.preventDefault();
});
Ответить с цитированием
  #9 (permalink)  
Старый 10.05.2021, 19:06
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Спасибо, могу ли я каким-то образом узнать цель таб-а — тоесть если цель таба принадлежит компоненту - тогда e.preventDefault()
Ответить с цитированием
  #10 (permalink)  
Старый 10.05.2021, 19:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

fori,
не понимаю.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переключение таблиц стилей в js t1gor Общие вопросы Javascript 15 17.07.2011 09:50
Отправка POST через JS без перехода на другую страницу m-mikle Общие вопросы Javascript 17 14.04.2010 15:24
Js + moo tools плавная смена div mansoff Events/DOM/Window 1 03.02.2010 11:11
Работа js +php без обновления страницы Jekel Javascript под браузер 18 29.11.2009 20:17
Html метки + div + JS boltayka Events/DOM/Window 1 07.09.2009 17:21