Jquery 动态菜单项（单击时更改文本）

我需要一些菜单方面的帮助。请参见以下菜单：

此菜单的代码：

    <div id="menu">
  <ul>
   <li class="home"><a href="#home" class="panel">home / <span class="go">you are here</span></a></li>
   <li class="about"><a href="#about" class="panel">about / <span class="go">go here</span></a></li>
   <li class="cases"><a href="#cases" class="panel">cases / <span class="go">go there</span></a></li>
   <li class="photos"><a href="#photos" class="panel">photos / <span class="go">maybe here</span></a></li>
   <li class="contact"><a href="#contact" class="panel">contact / <span class="go">or even here<span></span></a></li>
  </ul>
 </div>

如你所见，这是不完整的。我不知道如何从数组中获取值并将其分配给菜单项。“替换”文本起作用，但不会更改回原始状态。另外，由于某些原因，我现在无法单击列表项本身来激活jquery代码。我只需要点击它下面的几个像素。但我想这是一个css问题

如果有人能帮忙，我会非常感激的

问候,

Mathijs

这应该有效：

var msgs = [ "go here", "go there", "maybe here", "or even here" ];
var msgs_length = msgs.length;

$("#menu ul li").click(function () { 
     $('#menu ul li.active').removeClass('active');
     $(this).addClass('active');
     $('.go', this).text("you are here");

     $("#menu ul li").not(this).each(function(i) {
         $('.go', this).text(msgs[i % msgs_length]);
     });
});

说明：

• 如果只想设置文本，请使用

  text（）

  而不是

  .html（）

• $（'.go'，this）

  将在当前元素中找到任何类为

  go

  的元素（阅读更多信息）

• $（“#菜单ul li”）。非（此）

  选择除当前元素之外的所有

  li

  元素（了解更多信息）

• i

  是所选元素列表中元素的索引（了解更多信息）

• i%msgs\u length

  （模数）确保您始终拥有消息数组的有效索引（如果菜单项多于消息）

---

我不知道颜色是否已经起作用了，但这只是一个CSS问题：

#menu ul li .go {
    color: #FF0;
}

#menu ul li.active .go {
    color: #F00;
}

---

更新：

顺便说一句，不要“手动”设置主列表条目的值：

$('#menu ul li.home').addClass('active');
$('#menu ul li.active a .go').html("you are here");

考虑模拟单击，以便正确设置其他列表元素的值：

$('#menu li.home').click();

---

更新2：

要解决“必须单击下方”问题；）

这是css

#menu {
position:  fixed;
top:  120px;
left:40px;
z-index: 40;
font-family: Arial, sans-serif;
font-size: 0.6em;
text-transform: uppercase;
}

#menu ul li {
    float:  right;
}

#menu ul li a{
    background-color: #292929;
    display: block;
    padding: 12px 6px 4px 6px;
    text-align: right;
    margin-bottom: 9px;
    color: #f5f5f5;
    text-decoration: none;
}

#menu ul li.active a .go{
    color: #e4d555;
}

#menu ul li a:hover .go{
    color: #e4d555;
}

#menu ul li a:hover{
    text-decoration: none;
}

#menu ul li .go{
    font-family: Georgia, Serif;
    color: #ff0000;
    text-transform: lowercase;
    font-size:11px;
}

---

我了解一切，非常感谢，但是css问题没有解决。我不知道为什么，我使用一个有效的逻辑css来创建一个有效的逻辑菜单。@Mathijs Delva：到底是什么不起作用？当前的行为是什么？目前，列表项上的单击功能未激活。为了激活onclick事件，我只需点击每个列表项下的几个像素。顺便说一句，颜色有效，一直有效：-）如果你想看看我在说什么，请点击这里：@Mathijs Delva:Ah ok:）好的，点击对我有效（在Firefox中），但文本不会改变…：（我还看到你刚刚将我的代码添加到你的代码中。你基本上可以用我的代码替换你的代码。你应该将这一点放入你的问题中（仅相关部分，只需编辑你的问题）。哦，好的，对不起！让我们继续在原始帖子中讨论：）

$("#menu ul li a").click(function () { 
     $('#menu ul li.active').removeClass('active');
     $(this).parent().addClass('active');
     $('.go', this).text("you are here");

     $("#menu ul li a").not(this).each(function(i) {
         $('.go', this).text(msgs[i % msgs_length]);
     });
});

#menu {
position:  fixed;
top:  120px;
left:40px;
z-index: 40;
font-family: Arial, sans-serif;
font-size: 0.6em;
text-transform: uppercase;
}

#menu ul li {
    float:  right;
}

#menu ul li a{
    background-color: #292929;
    display: block;
    padding: 12px 6px 4px 6px;
    text-align: right;
    margin-bottom: 9px;
    color: #f5f5f5;
    text-decoration: none;
}

#menu ul li.active a .go{
    color: #e4d555;
}

#menu ul li a:hover .go{
    color: #e4d555;
}

#menu ul li a:hover{
    text-decoration: none;
}

#menu ul li .go{
    font-family: Georgia, Serif;
    color: #ff0000;
    text-transform: lowercase;
    font-size:11px;
}