javascript - 如何使用 jquery 和变量更改 div 的内容？

Question

你好，我一直在尝试使用 jquery 更改 div 的内容，但我遇到了以下问题，这是我的代码:

<div id="pages">
   <div id='cssmenu'>
   <ul id="themenu">
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class=''><a href='#'><span>Modules</span></a></li>
   <li class=''><a href='#'><span>Degrees</span></a></li>
   <li class=''><a href='#'><span>About us</span></a></li>
 </ul>

在 js.js 中:

var Modules = "<p> 12346 </p>";
var Degrees = "<p> degrees </p>";

$(document).ready(function() {
$('ul#themenu li').click(function() {
    $('li.active').removeClass('active');
    $(this).addClass('active');
    **$('#content').html(Modules);**
});

我想做的是根据与 ul 的列表项跨度名称匹配的变量相应地更改内容，如果您能想到更好的方法，请告诉我，提前谢谢您，Chris。

Answer 1

如果我没理解错的话，您是在尝试使用菜单项的名称来确定要使用的内容。我会把它保存在这样的对象中:

var text = {
   Modules : "<p> 12346 </p>",
   Degrees : "<p> degrees </p>"
};

然后点击:

$('ul#themenu li').click(function() {
    var section = $(this).find("span").text();
    $('li.active').removeClass('active');
    $(this).addClass('active');
    $('#content').html(text[section]);
});

仅供引用，不是使用 .text() 而是将 ID 或类添加到 li 可能更简洁并关闭它。