Изменить стиль CSS элемента, щелкнув другой

Question

Я получил эту структуру:

<div id="d1"> 
Text 
<div id="d2">Word</div> 
<a href="#hide">My other text</a> 
</div> 

Теперь я хочу, чтобы по щелчку на #hide:target, div#d2 исчезают.

Могу ли я сделать это с помощью CSS?

Answer 1

Вы можете сделать это с помощью CSS!

Если изменить ваш HTML разметку немного вы можете добиться этого с помощью CSS :target

#d2:target { 
 
     display: none; 
 
    }

<div id="d1"> 
 
     Text 
 
    <div id="d2">Word 
 
     <a href="#d2">My other text</a> 
 
    </div>

Answer 2

Возможно, вы должны использовать javascript или jQuery для этого.

$('#object').click(function(){ 
    $('#tohide').hide(); 
}); 

Чтобы сделать его специфичным для этого (локальной области)

if($('#d2 a').attr('href')=='#hide'){ 
    $('#d2 a').click(function(){ 
    $('#d2').hide(); 
    }); 
} 

Но это не правильный способ сделать это. Используйте классы.

Answer 3

вы можете сделать это с помощью JQuery очень легко, как:

$(document).ready(function(){ 
    $("a").click(function(){ 
    $("#d2").hide(); 
}); 
}); 

</script> 

Answer 4

Вы можете сделать это с помощью CSS, но вы должны использовать JavaScript, чтобы изменить CSS (стиль) элемента.

Это решение не требует подключаемых модулей (таких как jQuery).

<div id="d1"> 
    Text 
    <div id="d2">Word</div> 
    <a href="#hide" onclick="document.getElementById('d2').style.display='none';">My other text</a> 
</div> 

Если вы хотите, чтобы он был полностью бесфункционным.

<div id="d1"> 
    Text 
    <div id="d2">Word</div> 
    <a href="#hide" onclick="this.previousSibling.previousSibling.style.display='none';">My other text</a> 
</div> 

Answer 5

Я твердо убежден, что CSS для стиля, и Javascript для функции (и HTML предназначен для разметки).

Я совершил ошибку, используя: цель и функциональность здания с CSS, где это не должно быть, и поверьте мне, вы собираетесь сделать кошмар для себя с этими вредными привычками в будущем. jQuery будет вашим лучшим другом в подобных ситуациях. Он работает во всех браузерах (которые поддерживают javascript), и у вас не будет вашей функциональности, ломающейся в крайних случаях, и ваши пользователи разозлились. Сделайте то, что говорит Джек, и используйте простой JQuery. вы также можете использовать .addClass и .removeClass, чтобы изменить css другими способами, чем просто скрыть/показать.