Динамическое изменение содержимого тега div

Question

Я создал html-страницу, которая состоит из секции div в теге body.

Как изменить содержимое внутренних divs на основе события в другом в winf (vb.net) (например: при нажатии кнопки)?

<div id="magazine"> 
    <div style="background-image:url(pages/01.jpg);"></div> 
    <div style="background-image:url(pages/02.jpg);"></div> 
    <div style="background-image:url(pages/03.jpg);"></div> 
    <div style="background-image:url(pages/04.jpg);"></div> 
    <div style="background-image:url(pages/05.jpg);"></div> 
    <div style="background-image:url(pages/06.jpg);"></div> 
    <div style="background-image:url(pages/07.jpg);"></div> 
    <div style="background-image:url(pages/08.jpg);"></div> 
</div> 

Предположим, что я хочу, чтобы заменить его

<div id="magazine"> 
<div style="background-image:url(pages/01.jpg);"></div> 
<div style="background-image:url(pages/02.jpg);"></div> 
<div style="background-image:url(pages/03.jpg);"></div> 
<div style="background-image:url(pages/04.jpg);"></div> 
</div> 

Answer 1

В целом, некоторые примеры кода или что-то подобное полезны для объяснения проблем и решений. ;)

Если вы ищете, как реагировать на разные браузеры, вы найдете очень хорошие статьи с ключевым словом «браузерное обнюхивание». Проверьте wikipedia тоже! Обратите внимание, что существует множество разных подходов как для css, так и для javascript.

Answer 2

Вам потребуется связь и перенаправление или некоторые JavaScript на практически любого типа элемента.

Немного подробная информация поможет с более детальным ответом.

Kindness,

Dam

Answer 3

Использование JavaScript. Установите идентификатор в div, который хотите изменить, и тот, который вы хотите скопировать (?), Установите обработчик события onClick для вашей кнопки и в вызываемой функции, получите divs (с document.getElementById) и используйте метод innerHTML для каждого, чтобы либо получить, либо установить HTML для div.

Answer 4

Вы можете использовать JavaScript для этого, я дам вам пример JQuery, как я привык к нему:

HTML разметка:

<div id="section1"> 
    <p>CONTENT</p> 
</div> 
<div id="section2"> 
    <p>CONTENT</p> 
</div> 
<div id="section3"> 
    <p>CONTENT</p> 
</div> 
<div id="section4"> 
    <p>CONTENT</p> 
</div> 
<ul id="change-buttons"> 
    <li><a href="#" id="change1">Change content of 1st section</a></li> 
    <li><a href="#" id="change2">Change content of 2nd section</a></li> 
    <li><a href="#" id="change3">Change content of 3rd section</a></li> 
    <li><a href="#" id="change4">Change content of 4th section</a></li> 
</ul> 

А вот JavaScript:

$(document).ready(function() { 
    $('#change-buttons a').click(function() { 
     var num = $(this).attr('id'); 
     num = num.substr(-1); 
     $('#section' + num).text('NEW CONTENT'); 
    }); 
}); 

конечно, вы должны включить JQuery в раздел заголовка вашей HTML:

<script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script> 

Это просто общий пример, если бы вы были более конкретными, я бы дал вам более конкретные советы.