我有这一行，我有图像，想法是在点击图像时更改文字
<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”这样的第二个图像时，它会正确地填充表格，但在内容下它也填充了Mission内容，我想只显示视觉内容
JS：
<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;
答案 0 :(得分：0)
之前
var contenido =“”;
添加：
$（ “＃搜索Maincontent”）的HTML（ “”）;
您需要在添加新内容之前删除旧内容。
答案 1 :(得分：0)
当你点击视觉时，你在内容上使用.html而不是在maincontent上使用。所以保持它的价值。
你可以避免通过隐藏或用.show和显示div来操纵你的js中的字符串。我觉得它会更干净。