Нажатие на ссылку внутри div 2 должно скрывать внешний div 1

0

У меня есть два div бок о бок. Когда active гиперссылка (когда она нажата), я хочу скрыть div слева, используя display: none; ,

Я сделал это примерно год назад, но так как это мой первый сайт с тех пор, я не помню, как я это сделал.

Я знаю, что это можно сделать только в CSS, используя :active но просто не уверен, как это сделать. Как я могу это сделать?

  • 0
    Можете ли вы предоставить jsfiddle.net?
  • 0
    Что у меня есть, вы пытаетесь сделать вкладку?
Показать ещё 2 комментария
Теги:

3 ответа

1
Лучший ответ

Используйте селектор "общий родной брат" ~ в сочетании с a:active

HTML

<a href="#" name="trigger">Click Me</a>
<hr />
<div class="foo"></div>
<div class="bar"></div>

CSS

a:active ~ .foo {
    display: none;   
}

В основном это говорит: найдите div с классом foo, который является братом активного якоря и спрячет его. Не следует путать с соседним селектором родственного, +

Просмотрите демо здесь: http://jsfiddle.net/DNy2B/

Поделиться
  • 0
    это странно, скрипка не работает (IE11), она не работает и при тестировании на моем сайте.
  • 0
    На самом деле это странно; Я провел еще несколько экспериментов и заметил, что он работает с :hover но не активен, не могу найти много документации о том, почему комбинация: active и ~ не работает. Ненавижу это говорить, но, похоже, вам понадобится немного JS.
Показать ещё 3 комментария
1

Я не уверен, правильно ли я понял ваш вопрос, но если это то, что, как я думаю, вы попросили, сделайте это

<div style="display: none;">

Я изучаю HTML, поэтому я новичок, и это может быть не так, как я спросил, но я хотел помочь, так что да :)

Поделиться
  • 0
    Спасибо за попытку :)
-2

Это скроет/покажет div при нажатии ссылки.

<html>
    <head>
        <title>Title</title>
        <script src="jq.js"></script>
        <script>
            $(document).ready(function() {
                $("#link").click(function() {
                    $("#div2").toggle();
                });
            });
        </script>
    </head>
    <body>
        <div id="div1">
            div1
            <a id="link" href="#">hey</a>
        </div>
        <div id="div2">
            div2
        </div>

    </body>
</html>
Поделиться
  • 0
    Оп просит css вы отвечаете с помощью jquery ....

Ещё вопросы

Сообщество Overcoder
Наверх
Меню