css - 动态改变div标签的内容

Question

我创建了一个 html 页面，它在 body 标记中包含一个 div 部分。

如何在 vb.net winform 中根据另一个事件更改内部 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 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

你可以使用 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');
    });
});

当然，您必须在 html 的 header 部分包含 jQuery:

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

这只是一个一般的例子，如果你更具体我会给你更具体的建议。