Как показать блок по клику на ссылку (якорь)?

Question

[Костя]

Всем привет. Вообщем вопрос очень прост: как сделать, чтобы по клику по ссылке - кнопке открывался блок - div?
Пример использования можно посмотреть, тут на Toster - боковые кнопки.

Comments

[Костя]

<div class="sidebar">
<a href="#category" class="tt" title="Категории";><div class="category"></div></a>
  </div>

<div id="category"></div>

<div id="category"></div> нужно отрывать по клику на ссылку #category, и закрывать при нажатии в любой части страницы.

[Юрий Лобанов]

У Вас что такое: div внутрь a запихали? Это надо изменить.

[Юрий Лобанов]

@kapnod и точку с запятой уберите из a.

[Костя]

@iiil ; это случайно а div внутри a. чтобы назначить иконку для ссылки. В принципе можно его выкинуть и использовать class="tt"

[Юрий Лобанов]

@kapnod его выкидывайте или используйте span. Сейчас сделаю и скину ссылку.

Answer 1

[Юрий Лобанов]

jsfiddle.net/iiil/N3UcY
Стили я сделал только для демонстрации. Для Вас главное сделать для div с id='category' display:none - через css или инлайн стили.
Блок #category исчезает как по клику на ссылку, так и по клику на любую область помимо самого блока #category.

Comments

[Юрий Лобанов]

Да, думаю надо пояснить кое-что: Вы не должны использовать id='anything' в Вашей разметке :)

[Костя]

@iiil Большее спасибо =) Очень выручили. я то вообще в javascript полный ноль.

[Юрий Лобанов]

@kapnod, пожалуйста, самому было полезно вспомнить как обрабатывать клик по всему, кроме непосредственно блока. Если решение подошло - надо отметить его как решение.

[Костя]

@iiil Уже отметил. А можно сделать так, чтобы когда блок показывается, у определенного id или class z-index: 2 менялся на 3 ?

[Юрий Лобанов]

да, легко. А когда блок скрывается - он должен снова на 2 меняться?

[Костя]

ага

Answer 2

[Юрий Лобанов]

jsfiddle.net/iiil/N3UcY/3
Скрипт переключает для div с id='zindex' z-index с 2 на 3 и обратно. Когда id='category' открыт - z-index=3, когда закрыт - 2.
Все что Вам надо сделать: в css или в инлайн-стилях прописать для div#zindex z-index=2

Comments

[Костя]

Все работает как часы ;) я понимаю что очень настырен, но есть еше вопрос. Что нужно добавить в

[Юрий Лобанов]

@kapnod в? )

[Костя]

Не отправилось ! в тег ( a )

[Юрий Лобанов]

@kapnod Я писал про этот баг в поддержку, закину еще одно письмо.
А что добавлять в тег а? По вашему желанию, лишь бы там были классы и id, которые есть у меня в примере.

[Костя]

я хочу что бы при клике в url не добавлялось #category.
еще проблема возникла z-index обратно на 2 не меняется. хотя в примере меняется

[Юрий Лобанов]

@kapnod что касается z-index - смотрите внимательнее, все должно работать. Вы селекторы не меняли?
Что касается url - jsfiddle.net/iiil/N3UcY/5
В а ничего добавлять не надо, я просто слегка поправил js, попробуйте.

[Костя]

@iiil z-index работает, а вот в url при клике дописывается #category

[Юрий Лобанов]

@kapnod я там допустил ошибку грамматическую jsfiddle.net/iiil/N3UcY/7
надо e.preventDefault вместо e.preventDefoult

[Костя]

@iiil изменил, но все так же

[Юрий Лобанов]

@kapnod все, пора спать ) e.preventDefault(),скобки добавьте.
jsfiddle.net/iiil/N3UcY/8

[Костя]

@iiil Спокойной ночи. Спасибо! Вы в vk есть ?

[Юрий Лобанов]

@kapnod так работает теперь или нет?

[Юрий Лобанов]

@kapnod да, vk.com/iiilname

[Костя]

@iiil Да! Все работает )

Answer 3

[Юрий Лобанов]

jsfiddle.net/iiil/CS7uS/4
вот без наворотов )
слушайте, давайте свою разметку. Тут сотню и больше помогут сделать именно то, что надо.

Answer 4

[Назар Мокринский]

Простой вариант с jQuery:

$('button').click(function () {
    $('.block-to-show').show();
});

Больше с вопроса не ясно, ибо очень зависит от ситуации.

Answer 5

[Yuri Morozov]

Например, при помощи css display block/none.
Пример для jQuery:
<style>
.hide {display: none;}
</style>
<div id="tab" class="hide">content here</div>
<a id="btn" href="#">click me</a>
<script>
$('#btn').on('click', function() {$('#tab').toggleClass('hide'); return false;}
</script>

Answer 6

[Петруша Укропов]

$('a.class_name').on('click', function(){
    $('div.class_name_for_div').show();
});

Answer 7

[Krickt]

Объясню на словах.
Получаем все элементы с классом "tab", к примеру. Далее при событии нажатия показываем блок с ID, указанным в ссылке элемента.

Comments

[Костя]

Так и нужно. это делается через java или css ?

[Назар Мокринский]

@kapnod Java это совсем из другой области

[Костя]

@nazarpc javascript

[Krickt]

@kapnod "как сделать" и "сделайте" совсем разные вещи -_-

Answer 8

[Юрий Лобанов]

jsfiddle.net/iiil/CS7uS/3

Comments

[Костя]

Спасибо. мне желательно без всяких наворотов и эффектов