Как при нажатии на кнопку открыть div?

Question

[Артём Цымбалюк]

Здравствуйте.
Как сделать что бы при нажатии на ссылку
<a href="#" class="youtube>YouTube</a>
открылся див с классом .show-youtube
Но так же, потом допустим при нажатии на другую ссылку, открылся другой див с классом .vkontakte-show, а див с классом .show-youtube исчез

Answer 1

[lega]

jsfiddle.net/ayqu6Ljy

Comments

[Артём Цымбалюк]

lega не могу понять почему в фидле он работает, а у меня на html нет. хотя подключен тоже html5

[lega]

Артём Цымбалюк: Нужно подключить Angular Light: angularlight.org/bin/alight_0.12.last.min.js

[Артём Цымбалюк]

lega: всё равно никаких изменений

[lega]

Артём Цымбалюк: Значит что-то не доделали, возможно html подставляется отложенно, возможно опечатки в html, смотрите логи

[lega]

Артём Цымбалюк: атрибут al-app не пропустили?

[Артём Цымбалюк]

lega: нет

[Артём Цымбалюк]

lega оказывается не правильно изначально подключил библиотеку)) и такое бывает))
А не подскажите, как быть если изначально нужно что бы один из блоков был виден? А потом при переключение он уже уходил как и все?

[lega]

Артём Цымбалюк: al-init="active='youtube'"
jsfiddle.net/lega911/3Lpecyey

[Артём Цымбалюк]

lega Спасибо большое вам, Олег

[Артём Цымбалюк]

lega Я очень сильно извиняюсь)) Ещё такой момент, что делать если допустим < a > находится в одной части кода а < div > которые они должны открывать в другой? Нету возможности засунуть их в один < div al-app >
FIDDLE

[lega]

Артём Цымбалюк: Нет проблем,
есть несколько способов, самые простые:
1) сделать al-app на body элемент, тогда все элементы будут в одном и том же "приложении"
2) Вызвать биндинг вручную с указанием нужных элементов либо указать селектор, пример: jsfiddle.net/lega911/9y5jan4w
главное, alight.bootstrap должен быть вызван когда html уже готов (что-б было что "оживлять"): либо в конце страницы, либо при событии когда страница готова.

[lega]

Артём Цымбалюк: Если у вас не 2 элемента а список, можно сделать так: jsfiddle.net/lega911/rd60am9w

[Артём Цымбалюк]

lega спасибо большое. Реализовал 2ой способ

[Артём Цымбалюк]

lega снова здравствуйте) Появилась маленькая проблемка. А как сделать так, что бы при клике на ту же самую ссылку, див скрывался?

[lega]

Артём Цымбалюк: jsfiddle.net/lega911/71969maj

[Артём Цымбалюк]

lega не совсем понял как вы это организовали...
у меня на < a @click="active='first'" > а на < div :hidden="active!='first'" > как в моём случае должно это выглядеть?
Я понял что ещё дописать al-repeat="item in items" нужно, дописал. Но не могу разобраться с тем что Выше вам написал

[lega]

Артём Цымбалюк:
"active=active!=item?item:null" - это голый JS

эквивалентно if(active != item) { active = item } else { active = null }
https://msdn.microsoft.com/en-us/library/be21c7hw(...

> у меня на < a @click="active='first'" >
active=active!='first':'first':null

а ещё можно переместить код в функцию и вызвать
jsfiddle.net/lega911/L1x4y695

[Артём Цымбалюк]

lega ага, понял. Спасибо ещё раз большое

[Артём Цымбалюк]

lega странно, не работает. Можно вашу страничку ВК ?

[lega]

Артём Цымбалюк: Вот так попроще: jsfiddle.net/lega911/paed3651

теперь @click="onClick(item)" просто вызывает ф-ию onClick, а там я уже устанавливаю значение active

Можете сюда писать: https://plus.google.com/u/0/communities/1018292511...

Answer 2

[Urvin]

https://jsfiddle.net/3qtn7f1v/

Comments

[Артём Цымбалюк]

Urvin спасиб

[Артём Цымбалюк]

Urvin ваш код не работает в Firefox

Answer 3

[Дмитрий]

<div class="wrapper">
  		<div class="youtube">youtube</div>
  		<div class="vkontakte">vkontakte</div>
  		<a href="#" class="youtube" >youtube</a>
 		<a href="#" class="vkontakte">vkontakte</a>
</div>

<style>
		div.youtube,
		div.vkontakte {
  			display: none;
  			border: 1px #f00 dashed;
  			padding:10px;
}
		
	</style>

var div = document.querySelectorAll('div');

	div[0].addEventListener('click', function(e){
	if(e.target.tagName == 'A') {
	if(e.target.className == 'youtube') {
		[].forEach.call(div, function(div) {
			if(div.className == 'youtube') {
				div.style.display = 'block';
			} else {
				div.style.display = '';
			}
		})
		}
	if(e.target.className == 'vkontakte') {
		[].forEach.call(div, function(div) {
			if(div.className == 'vkontakte') {
				div.style.display = 'block';
			} else {
				div.style.display = '';
			}
		})
		}
	}
})

ну или без извратов ))

var wrapper = document.querySelector('.wrapper');
	var vk = document.querySelector('div.vkontakte');
	var y = document.querySelector('div.youtube');
	
wrapper.addEventListener('click', function(e){ 
	 if(e.target.tagName == 'A') {
	 	var key = e.target.className;
	 	switch (key) {
  			case 'youtube':
    			y.style.display = 'block';
				vk.style.display = '';
    			break;
  			case 'vkontakte':
    			y.style.display = '';
				vk.style.display = 'block';
   	}
	 }
})