Нажав на div, измените содержимое другого div

Question

Мне нужно, чтобы содержимое внутри <div class="tcw-content"> изменилось, когда щелкнул другой div, однако я никогда не использовал Ajax (возможно, это не нужно делать в Ajax, но я могу " t думаю о JS/CSS, примеры оценили :)), есть ли у кого-нибудь примеры для меня, пожалуйста? Например, пользователь нажмет на <li id="tab-tab_700964" class="grp"><a>Group A</a></li>, и как только будет нажата горячая точка, содержимое внутри вышеупомянутого div изменится.

Как я могу это достичь?

Answer 1

Вы можете использовать jQuery, пример:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#tab-tab_700964 a').on('click', function(){ 
     $('.tcw-content').html('hey'); 
    }); 
}); 
</script> 

<li id="tab-tab_700964" class="grp"><a>Group A</a></li> 
<div class="tcw-content"> 
    hello 
</div> 

Answer 2

сделать это с помощью jquery. Включите библиотеку jquery, а затем добавьте новый файл javascript с событием document.ready. Внутри документа готовы, просто добавьте что-нибудь, чтобы слушать, когда щелкнут ваш div. Читайте здесь:

http://www.w3schools.com/jquery/event_click.asp

http://api.jquery.com/click/

Answer 3

Go посмотрите на jQuery. Это делает это довольно легко. Ваш пример будет выглядеть следующим образом:

$('.grp a').click(function(e) { 
    e.preventDefault(); 
    $('.tcw-content').html('new content goes here'); 
}); 

Объяснить, $ является объектом JQuery. Когда вы используете его как функцию со строкой, он находит все элементы, соответствующие этому селектору, почти точно так же, как и селектора CSS. Затем есть множество функций, которые вы можете вызвать для этих согласованных элементов. В этом случае мы вызываем click() и передаем ему функцию, которая будет запускаться при нажатии ссылки. Внутри этой функции мы находим div, используя $('.tcw-content'), и обновляем его содержимое с помощью функции html().

jQuery's documentation неплохое. Начните играть с ним, возможно, используя jsFiddle в качестве песочницы.

Answer 4

Возможно, вы ищете полнотекстовый контент.

HTML Content Slider

:: Featured Content Slider v2.5

Examples

40 examples