установить div по умолчанию (переходы CSS)

Моя цель - создать страницу с 3 абсолютно позиционируемыми, перекрывающимися div. Одновременно должно быть видно только 1 div. 3 кнопки в нижней части страницы используются для «выбора» каждого div с помощью fade-in/out с использованием переходов CSS.установить div по умолчанию (переходы CSS)

Я близко, но у меня есть небольшая проблема.

В настоящее время при инициализации страница пуста с 3 кнопками.
Мой вопрос:, как я могу получить первый div (с id = "# 1") по умолчанию при инициализации без необходимости нажимать кнопку. Я все еще хочу, чтобы div # 1 выполнял обычные правила fade-in/fade-out, за исключением инициализации.

HTML:

<div id="1" class="inner">One</div> 
<div id="2" class="inner">Two</div> 
<div id="3" class="inner">Three</div> 

<a href="#1" class="button">Toggle One</a> 
<a href="#2" class="button">Toggle Two</a> 
<a href="#2" class="button">Toggle Three</a>

НЕКОТОРЫХ CSS:

.inner{ 
    position:absolute; 
    visibility:hidden; 
    opacity:0; 
    transition:visibility 0s linear .5s, opacity .5s linear; 
} 
.inner:target{ 
    visibility:visible; 
    opacity:1; 
    transition-delay:0s; 
}

Я предпочел бы решение, которое не использует JavaScript/JQuery, но я не против, если это необходимо.

источник

2014-01-08 cjhin

ID недействительны, они не могут начинаться с цифры –

жаль, что я просто использовал заполнители. Не знаю, что идентификаторы целочисленного значения являются недействительными, хотя, полезно знать! – cjhin

Скорее всего, вам нужно будет использовать JavaScript/jQuery как минимум для установки видимости div #1. Вы можете сделать это с помощью CSS с помощью:

.inner:first-of-type { 
    visibility: visible; 
    opacity: 1; 
}

http://jsfiddle.net/74qYY/

ограничения есть, что фон требуется, чтобы скрыть другие дивы. Если вы не можете с этим справиться, вы всегда можете использовать JS: http://jsfiddle.net/74qYY/1/

источник

2014-01-08 08:00:32

ах я вижу. Интересно, я не думал об использовании фона на «.inner», чтобы скрыть значение по умолчанию. Определенно работает на мой вопрос! К сожалению, вероятно, не будет экстраполироваться на реальную проблему, которую я пытался решить, но это то, что я считаю. Благодаря! – cjhin

Для тех, кого это интересует, я нашел круглый способ сохранить переходы CSS, не требуя фона. В частности, я использовал фрагменты url, установленные кнопками.

В вопросе, я хотел, чтобы div «# 1» отображался по умолчанию. Другой способ взглянуть на это - это то, что я хотел, чтобы запрос GET «/» перенаправлялся на «/ # 1».

Я использовал некоторый jQuery, чтобы проверить отсутствие фрагмента URL-адреса, а затем перенаправить на www.url.com/#1, что, в свою очередь, вызывает переход CSS.

источник

2014-01-08 09:05:14 cjhin

установить div по умолчанию (переходы CSS)

ответ

Смежные вопросы