Javascript Can´；单击时不刷新数据

我有这一行，我有图像，想法是改变文本，如果点击图像

<div class="row">
    <div class="col-md-6">
        <p>
            <a href="javascript:fxContent('mision')"><img class="img-responsive" src='/images/Mission01button_@Session["UserLanguage"].ToString()@Html.Raw(".png'></a>")
        </p>

        <p>
            <a href="javascript:fxContent('vision')"><img class="img-responsive" src='/images/Vision02button_@Session["UserLanguage"].ToString()@Html.Raw(".png'></a>")
        </p>

        <p>
            <a href="javascript:fxContent('valores')"><img class="img-responsive" src='/images/Values03button_@Session["UserLanguage"].ToString()@Html.Raw(".png'></a>")
        </p>

        <p>
            <a href="javascript:fxContent('acerca')"><img class="img-responsive" src='/images/About04button_@Session["UserLanguage"].ToString()@Html.Raw(".png'></a>")
        </p>

    </div>
    <div class="col-md-6">

        <div id="maincontent" style="background-color: #fff; padding: 25px; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border: 1px solid #C7C8C9;">
            <p style="text-align:justify" id="content"></p>   
        </div>

    </div>

</div>

")


")


")


")

问题是，当我尝试选择第二个图像（如“Vision”）时，它会正确填充表格，但在“内容”下，它也会填充任务内容，并且我只想显示Vision内容

JS:

$（文档）.ready（函数（）{
fxContent（“mision”）；
});
功能内容（第节）{
var contenido=“”；
道岔（区段）{
“米西翁”案：
contenido=contenido+“知识产权”是一种社会精英；
contenido=contenido+“
”；
contenido=contenido+“
Lorem ipsum dolor sit amet，继续培养精英”；
contenido=contenido+“
Lorem ipsum dolor sit amet，继续培养精英”；
contenido=contenido+“
Lorem ipsum dolor sit amet，继续培养精英”；
contenido=contenido+“
”；
$（“#主要内容”）.append（contenido）；
contenido=“”；
contenido=contenido+“知识产权”是一种社会精英；
contenido=contenido+“
”；
contenido=contenido+“
Lorem ipsum dolor sit amet，继续培养精英”；
contenido=contenido+“
Lorem ipsum dolor sit amet，继续培养精英”；
contenido=contenido+“
Lorem ipsum dolor sit amet，继续培养精英”；
contenido=contenido+“
Lorem ipsum dolor sit amet，继续培养精英”；
contenido=contenido+“
Lorem ipsum dolor sit amet，继续培养精英”；
contenido=contenido+“
”；
$（“#主要内容”）.append（contenido）；
contenido=contenido+“知识产权”是一种社会精英；
contenido=contenido+“
”；
contenido=contenido+“
知识同我分享，分享精英知识同我分享，分享精英知识”
”；
contenido=contenido+“
Lorem ipsum dolor sit amet，是一位杰出的领导者。”；
contenido=contenido+“
通过Lorem ipsum dolor sit amet、consectetur adipiscing ELITS Lorem ipsum dolor sit amet、consectetur ADIPISTING ELITS
”；
contenido=contenido+“
Lorem ipsum dolor sit amet，consectetur adipiscing ELITE HLorem ipsum dolor sit amet，consectetur adipiscing ELITE Lorem ipsum dolor sit amet，consectetur adipiscing ELITE
”；
contenido=contenido+“
尊重精英，尊重精英。尊重精英，尊重精英。
”；
contenido=contenido+“
Lorem ipsum dolor sit amet，consectetur adipiscing elit和Lorem ipsum dolor sit amet，consectetur adipiscing elit Lorem ipsum dolor sit amet，consectetur adipiscing elit
”；
contenido=contenido+“
”；
$（“#主要内容”）.append（contenido）；
$（“#主要内容”）。附加（“”）；
打破
案例“愿景”：
//#塔布拉
contenido=contenido+“”；
contenido=contenido+“Name”；
contenido=contenido+“位置”；
contenido=contenido+“我爱我，我爱我，我爱我，我爱我”；
contenido=contenido+“知识同我同我同我共事，共事精英知识同我同我同我共事，共事精英”；
contenido=contenido+“知识同我同我同我共事，共事精英知识同我同我同我共事，共事精英”；
contenido=contenido+“知识同我同我同我共事，共事精英知识同我同我同我共事，共事精英”；
contenido=contenido+“”；
$（“#content”）.html（contenido）；
打破

之前

var contenido=“”

加：

$（“#主要内容”）.html（“”）

---

在添加新内容之前，您需要删除旧内容。

当您单击vision时，您在内容上使用.html，但在maincontent上不使用，因此它将保留其值

---

你可以通过隐藏或用.show和.hide显示div来避免在js中操纵字符串，我认为这样会更干净。

你没有删除

\maincontent

的旧内容，只是用

.append（）

添加到它。我不理解，你能给我解释一下@Barmar吗

<script type="text/javascript">

    $(document).ready(function () {
        fxContent("mision");
    });

    function fxContent(section) {

        var contenido = "";
        switch (section) {

            case "mision":

                contenido = contenido + " <h1 >Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>";
                contenido = contenido + "<p style='text-align:justify'><ul>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "</ul></p>";



                $("#maincontent").append(contenido);
                contenido = "";


                contenido = contenido + " <h1 >Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>";
                contenido = contenido + "<p style='text-align:justify'><ul>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "</ul></p>";



                $("#maincontent").append(contenido);


                contenido = contenido + " <h1 >Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>";
                contenido = contenido + "<p style='text-align:justify' ><ul>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>.</li>";
                contenido = contenido + "<li>Through <span style='font-weight:bold'>Lorem ipsum dolor sit amet, consectetur adipiscing elit</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit <span style='font-weight:bold'>HLorem ipsum dolor sit amet, consectetur adipiscing elit</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit <span style='font-weight:bold'>Respect</span>. Lorem ipsum dolor sit amet, consectetur adipiscing elit <span style='font-weight:bold'>Integrity</span>.</li>";
                contenido = contenido + "<li><span style='font-weight:bold'>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> and <span style='font-weight:bold'>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>";
                contenido = contenido + "</ul></p>";




                $("#maincontent").append(contenido);


                $("#maincontent").append('<div class="text-center" style="margin-top:20px"><img src="/images/Mission01image.jpg" class="img-responsive"></div>');

                break;

            case "vision":
                //#Tabla
                contenido = contenido + "<table class='table table-hover'>";
                contenido = contenido + "<tr><th>Name</th>";
                contenido = contenido + "<th>Position</th></tr>";
                contenido = contenido + "<tr><td>JLorem ipsum dolor sit amet, consectetur adipiscing elit</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>";
                contenido = contenido + "<tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>";
                contenido = contenido + "<tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>";
                contenido = contenido + "<tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>";
                contenido = contenido + "</table>";
                $("#content").html(contenido);
                break;