动态菜单项（单击更改文本）
我需要一些菜单方面的帮助。 请参阅以下菜单：
菜单
此菜单的代码：
我想做什么：点击一个菜单项：1。将红色文字改为黄色’你在这里’2.将上一个菜单项改回原来的状态（例如红色和“去这里”）。
4个值“go here”，“go there”，“也许在这里”，“甚至在这里”是应该分配给其他菜单项的4个值（如示例）。
这是我已有的代码：
$('#menu ul li.home').addClass('active') $('#menu ul li.active a .go').html("you are here"); $("#menu ul li").click(function () { $('#menu ul li.active').removeClass('active'); $(this).addClass('active'); $('#menu ul li.active a .go').html("you are here"); }); var arr = [ "go here", "go there", "maybe here", "or even here" ]; var obj = { item1: "go here", item2: "go there" ,item3: "maybe here", item4: "or even here"}; $('#menu ul li').click(function () { var str = $('#menu ul li.active a .go').text(); $('#menu ul li.active a .go').html(str); });
如你所见，它是不完整的。 我不知道如何从数组中获取值并将它们分配给菜单项。 替换文本有效，但不是更改回原始状态。 此外，由于某种原因，我无法单击ONTO列表项本身以激活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)会在当前元素中找到任何带有类的元素（阅读有关选择器上下文的更多信息） -
$("#menu ul li").not(this)选择除当前一个之外的所有li元素（了解更多关于.not()） -
i是所选元素列表中元素的索引（了解有关.each()更多信息） -
i % msgs_length（modulo）确保您始终拥有消息数组的有效索引（如果有多个菜单项而不是消息）
我不知道颜色是否已经有效，但这只是一个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();
Update2 ：
修复“必须点击下方”问题;）
$("#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]); }); });
这是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; }