Question

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

此菜单的代码：

    <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>

我想做什么：点击菜单项： 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

Answer 1

这应该有效：

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的任何元素（了解有关selector context的更多信息）
$("#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;
}

<强>更新

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

$('#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]);
     });
});

Answer 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;
}

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

2 个答案: