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列表项目范围名称相匹配的变量进行相应更改，如果你能想到更好的方法，请告诉我，谢谢你先生，克里斯。

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()可能更清晰，而是向li添加ID或类并关键。

Answer 2

好吧，试试吧：

$('#content').html(Modules);

使用HTML DOM innerHTML Property更改元素内容。

或者只使用javascript和getElementById属性：

document.getElementById("content").innerHTML=Modules;

Answer 3

我认为您需要以某种方式将JS数据映射到HTML元素。一种简单的方法是将元素或ID附加到元素中，以便您可以直接访问它，现在它将包括获取span标记的文本，然后使用该值访问全局数据

在点击功能中使用当前模型

var key = $(this).find('span').text(); // Modules
window[key] // var Modules = "<p> 12346 </p>"

使用id并在对象中存储数据：

<div id="pages">
   <div id='cssmenu'>
   <ul id="themenu">
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li id="Modules" 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>

然后您可以使用ID $('#Modules')

轻松访问模块

如果您需要使处理点击完全通用，您可以创建一个对象并具有与元素id

对应的属性

var DATA = {
  'Modules': 'darfdsa';
}

单击

DATA[$(this).attr('id')];

Answer 4

点击最后一个树链接查看输出，你可以这样做

var Modules = "<p style='color:red;'> 12346 </p>";
var Degrees = "<p style='color:green;'> degrees </p>";
var Aboutus = "<p style='color:yellow;'> About us</p>";

$(document).ready(function() {
$('ul#themenu li').click(function() {
    $('li.active').removeClass('active');
    $(this).addClass('active');
  //alert($(this).find('span').text().replace(/\s+/g, ""));
  $('#content').html(window[$(this).find('span').text().replace(/\s+/g, "")]);
});
  });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
     <div id="content"></div>

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

4 个答案: