Сделать div видимым, когда опция отмечена

Я просмотрел несколько разных вопросов, помогая мне добраться до этой точки, однако я не могу понять селектор, который позволяет мне добраться до внешнего DIV.Сделать div видимым, когда опция отмечена

Если я удалю два из DIV, код работает отлично, но с форматированием мне нужны divs, чтобы иметь возможность контролировать внешний вид. Любая помощь будет работать. Я знаю, что ~ - это дочерний селектор, поэтому он работает без DIV.

Как выбрать DIV?

Код:

.reveal-if-active { 
 
    color: #ccc; 
 
    font-style: italic; 
 
    opacity: 0; 
 
    transform: scale(0.8); 
 
    max-height: 0px; 
 
    transition: 0.5s; 
 

 
} 
 

 
input#photo1:checked ~ div#portraits, 
 

 
input#photo2:checked ~ div#wedding, 
 

 
input#photo3:checked ~ div#other { 
 

 
    color: #f00; 
 
    font-style: normal; 
 
    transform: scale(1); 
 
    opacity: 1; 
 
    max-height: 150px; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled Document</title> 
 

 
</head> 
 

 
<body> 
 
    <form> 
 
    <div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s"> 
 
     <label for="photo"> 
 
     <span class="error" id="err-phone">Please Select What you are looking for?</span> 
 
     </label> 
 
     <input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits"> 
 
     <label for="photo1">Portraits</label> 
 
     <input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding"> 
 
     <label for="photo2">Wedding</label> 
 
     <input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other"> 
 
     <label for="photo3">other</label> 
 
    </div> 
 
    <div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div> 
 
    <div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div> 
 
    <div class="eight columns reveal-if-active" id="other" name="other">Other</div> 
 
    </form> 
 
</body> 
 

 
</html>

источник

2015-03-22 Chad Braithwaite

возможных дубликатов [CSS-селектор для отмеченной метки переключателя] (http://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label) –

cchacholiades правильный - вам понадобится javascript, чтобы делать то, что вы хотите. +1

On a CSS hover event, can I change another div's styling?

Однако Javascript для того, что вы хотите это довольно просто - это будет выглядеть примерно так:

$(document).ready(function(){ 
    $('input[name="photo"]').click(function(){ 
     var phot = $(this).val(); 
     $('#'+phot).show().css({'background':'yellow','opacity':'1'}); 
    }); 
});

jsFiddle Demo

Примечания:

(1) Поскольку у вас уже есть ID желаемый DIV сохраняется как value кнопки нажал радио, это просто, чтобы захватить это значение: $(this).val() - $ (это)относится к элементу, который нажал на

(2) я продемонстрировал используя как .show() - то же самое, что и css display:block, и фактически используют сами заявления css.

Честно говоря, я думаю, что для вас будет просто использовать jQuery для этого. Единственное ограничение необходимо загрузить библиотеку JQuery, как правило, в <head> теги, как это:

<head> 
    <!-- other stuff in head --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</head>

Если вы хотите, чтобы некоторые быстрые уроки по JQuery, найти бесплатные видео Tuts здесь:

https://www.thenewboston.com/videos.php?cat=32

или

http://phpacademy.org

источник

2015-03-23 02:21:23 gibberish

Могу ли я задать один вопрос? Почему вы сделали желтый фон с помощью javascript? И когда я беру это, он перестает работать? –

Просто удалите именно эти символы, включая запятую, и он будет продолжать работать: * '' background ':' yellow ', '* Метод' .css() 'jQuery имеет две формы:' .css (' selector ',' 'action'); 'и - когда требуется несколько операторов,' .css ({'selector': 'action', 'selector2': 'action2'}); '* - отметить, что разделитель селектора/действия изменяется от запятой до двоеточия, а запятая теперь отделяет несколько операторов * – gibberish

Я думаю, что вы еще не стиль родителя, основанный на потомков с помощью CSS только, вы можете рассмотреть возможность использования JavaScript, или JQuery возможно. Посмотрите на это ссылки: Parent Selectors in CSS, Is there a CSS parent selector?

Попробуйте HTML структуру:

<body> 
    <form> 
    <div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s"> 
     <label for="photo"> 
     <span class="error" id="err-phone">Please Select What you are looking for?</span> 
     </label> 
     <input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits"> 
     <label for="photo1">Portraits</label> 
     <input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding"> 
     <label for="photo2">Wedding</label> 
     <input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other"> 
     <label for="photo3">other</label> 

     <div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div> 
     <div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div> 
     <div class="eight columns reveal-if-active" id="other" name="other">Other</div> 

    </div> 
    </form> 
</body>

Для того, чтобы получить эту работу, вы должны иметь элементы, которые имеют reveal-if-active класс в том же div контейнер с option. Проверьте это article.

Чтобы расположить их за пределами использования позиционированием родительского <div> на .reveal-if-active класса:

position:absolute; 
top: 40px;

См Example.

источник

2015-03-23 00:10:54 cch

Это мой следующий вариант, если Я не могу понять это. Однако я бы хотел, чтобы они находились за пределами DIV. Просто из-за того, как я форматирую форму, я не могу иметь ее внутри того же DIV. Есть ли селектор CSS, который будет работать вне этого DIV? –

Я обновил пример, дайте мне знать, если это работает – cch

Да, это определенно помещает его в другое место. Однако это не решает проблему. Из-за структуры всей формы, которую я удалил ... Мне нужно выяснить CSS, чтобы получить его вне div. а не просто позиционировать его. –

Сделать div видимым, когда опция отмечена

ответ

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