Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Отображение нужного блока (https://javascript.ru/forum/events/71337-otobrazhenie-nuzhnogo-bloka.html)

bonny 11.11.2017 14:03

Отображение нужного блока
 
Нужен скрипт, который в onclick кнопки отработает и отобразит нужный дочерний элемент div.
Кнопок будет несколько как и myDiv#. По ним нужно отобразить нужный myDiv#, а другие спрятать.
<div id="myDiv">
<div id="myDiv1">Текст</div>
<div id="myDiv2">Текст2</div>
<div id="myDiv3">Текст3</div>
...
</div>

Спасибо.

Nexus 11.11.2017 14:10

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="myDiv">
<a href="#" data-target=".myDiv1">myDiv1</a>
<a href="#" data-target=".myDiv2">myDiv2</a>
<div class="myDiv1">Текст</div>
<div class="myDiv2">Текст2</div>
<div class="myDiv3">Текст3</div>
</div>
<script>
    $(function(){
        $('#myDiv a[data-target]').click(function(){
			$('#myDiv [class*="myDiv"]').hide().filter($(this).data('target')).show();
		});
	});
</script>

bonny 11.11.2017 15:06

Блин. Почему-то у меня не работает как нужно.
<div align="center"><a class="waves-effect pink darken-4 waves-light btn modal-trigger" href="#modal_achiev" data-target=".achiev_ssv">Достижения</a></div>
<div align="center"><a class="waves-effect pink darken-4 waves-light btn modal-trigger" href="#modal_achiev" data-target=".achiev_ktn">Достижения</a></div>

<!-- Modal Structure -->
<div id="modal_achiev" class="modal modal-fixed-footer">
    <div class="modal-content">
        <h4>Достижения</h4>
        <div class="row">
            <div id="achiev">
                <div class="achiev_ssv">Текст</div>
                <div class="achiev_ktn">Текст2</div>
            </div>
        </div>
    </div>
    <div class="modal-footer"><a class="modal-action modal-close waves-effect waves-gray btn-flat">Закрыть</a></div>
</div>

<script>
    $(function(){
        $('#achiev a[data-target]').click(function(){
			$('#achiev [class*="achiev"]').hide().filter($(this).data('target')).show();
		});
	});
</script>

Текст вот не меняется.
http://prntscr.com/h91wqv

Nexus 11.11.2017 15:29

У вас в html нет элементов удовлетворяющим этому селектору:
#achiev a[data-target]

$(function(){
	$('a[href="#modal_achiev"][data-target]').click(function(){
		$('#achiev [class*="achiev"]').hide().filter($(this).data('target')).show();
	});
});

bonny 11.11.2017 15:35

Спасибо.

Nexus 11.11.2017 15:39

bonny, а у меня получилось: https://jsfiddle.net/gozgrbLk/
jQuery к странице подключена?

bonny 11.11.2017 15:47

Цитата:

Сообщение от Nexus (Сообщение 469807)
bonny, а у меня получилось: https://jsfiddle.net/gozgrbLk/
jQuery к странице подключена?

У меня есть. Старая версия только была. Щас всё хорошо.


Часовой пояс GMT +3, время: 05:57.