动态菜单项(单击更改文本) [英] Dynamic menu items (change text on click)

问题描述

我需要一些菜单帮助.请参阅以下菜单:

i need some help with a menu. See the following menu:

菜单

此菜单的代码:

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

我想做什么:onclick菜单项: 1.将红色文字更改为黄色您在这里" 2.将上一个菜单项更改回其原始状态(例如，红色和转到此处").

What i want to do: onclick a menu item: 1. change the red text to yellow 'you are here' 2. change the previous menu item back to its original state (eg red and "go here").

去这里"，去那里"，也许在这里"，甚至这里"这4个值是应分配给其他菜单项的4个值(例如示例).

The 4 values "go here", "go there", "maybe here", "or even here" are the 4 values that should be assigned to the other menu items (like the example).

这是我已经拥有的代码:

This is the code i already have:

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

如您所见，它是不完整的.我不怎么从数组中获取值并将它们分配给一个菜单项.替换文本有效，但返回原始状态无效.另外，现在，由于某种原因，我无法单击列表项本身以激活jquery代码.我只需要单击下面的几个像素即可.但是我想这是一个CSS问题.

As you see, it's incomplete. I don't how to get the values from the array and assign them too a menu item. The replace text works, but not the change-back-to-original-state. Also, right now, for some reason i can't click ONTO the list item itself in order to activate the jquery code. I need to click just a few pixels under it. But i guess that's a css issue.

如果有人可以提供帮助，我将非常感谢！

If anyone can help, i'd be super thankful!

此致

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的元素(了解有关选择当前元素以外的所有li元素(有关 )
• i是所选元素列表中元素的索引(有关 .each() )
• i % msgs_length(模)可确保您始终为消息数组拥有有效的索引(以防菜单项多于消息)

• Use text() instead of .html() if you want to set text only
• $('.go', this) will find any element with class go inside the current element (read more about selector context)
• $("#menu ul li").not(this) selects all li elements besides the current one (read more about .not())
• i is the index of the element in the list of the selected elements (read more about .each())
• i % msgs_length (modulo) ensures that you always have a valid index for the message array (in case there are more menu items than messages)

我不知道颜色是否已经可以使用，但这只是CSS问题:

I don't know if the color thing already works, but this is only a CSS issue:

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

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

---

更新:

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

Btw instead of "manually" setting the value for the home list entry:

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

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

consider to simulate a click so that the values for the other list elements are correctly set:

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

---

Update2 :

要解决必须点击以下"问题；)

To fix the "have-to-click-below" issue ;)

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

这篇关于动态菜单项(单击更改文本)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！