更改多个超链接的类OnClick在一个组中。页面上有多个组

Question

我一直在寻找过去几天，但是，我找不到能够解决我目前面临的所有限制的解决方案。任何帮助将不胜感激。

jQuery已在页面上使用。

当前场景

我有一个包含多个面板的现有页面。每个面板都有一个小的导航菜单（水平UL列表），用于显示/隐藏该面板中的图层。显示/隐藏功能正在按预期工作。

缺少什么

单击时突出显示当前活动的菜单项，并通过更改类将以前活动的项恢复为非活动状态。

约束

1. 类 - 有效/无效应用于<a>代码
2. 设计是这样的，即活动/非活动类都是唯一的，即我们不能将一个公共类（例如.selected）分配给一组或所有超链接
3. 页面上有多个这样的独特组，我需要能够单独定位它们。

的jsfiddle

请参阅jsFiddle illustration here。

HTML代码

我正在使用的基本HTML块如下：

<div id="panel">
  <div id="navwrapper">
    <ul id="nav">
      <li><a href="javascript:showhide('div_1');" class="grp1_1_selected">One</a></li>
      <li><a href="javascript:showhide('div_2');" class="grp1_2">Two</a></li>
      <li><a href="javascript:showhide('div_3');" class="grp1_3">Three</a></li>
    </ul>
  </div>
  <div id="div_1" name="group1">Some content here for Div 1</div>
  <div id="div_2" name="group1">Some content here for Div 2</div>
  <div id="div_3" name="group1">Some content here for Div 3</div>
</div>

页面上有多个这样的面板（每个都是唯一的），因此其他类似的解决方案无法正常工作。

Answer 1

$('ul#nav > li > a').on('click', function() {

    $('ul#nav a').each(function() {
        $(this).attr('class', function() {
           return this.className.replace('_selected','');
        })
    });
    $(this).addClass($(this).attr('class') + '_selected');

});

检查出来：

的 DEMO1 的

另一个 DEMO2

在DEMO2中，我使用ul.nav所有ul的公共类，以便您可以更改不同ul的各种ID。

我认为你需要这样的东西。

Answer 2

如果你有多个这样的面板，那么你应该使用类

<div class="panel">
  <div class="navwrapper">
    <ul class="nav">
      <li><a class="selected">One</a></li>
      <li><a>Two</a></li>
      <li><a>Three</a></li>
    </ul>
  </div>
  <div class="panel_content">Some content here for Div 1</div>
  <div class="panel_content">Some content here for Div 2</div>
  <div class="panel_content">Some content here for Div 3</div>
</div>

您可以使用此代码来处理它们。

  $('.panel').each(function() {
     var panel = $(this);
     var a = $(this).find('.nav a').click(function() {
        panel.find('.panel_content').eq(a.index(this)).show().
           siblings('.panel_content').hide();
        $(this).addClass('selected').parent().siblings().
           children().removeClass('selected');
     });
  });

它适用于所有面板

Answer 3

使用jQuery时，不应将js函数添加到href标记中，请检查demo以获得更好的解决方案。

$(document).ready(function() {
$('#nav li a').on('click', function() {
    var target = $(this).attr('href').substring(1).split('-');
    $('a.group'+target[0]).removeClass('selected');
    $(this).addClass('selected');
    $('div.group'+target[0]).hide();
    $('div#div_'+target[1]+'.group'+target[0]).show();
}); 
});​

请注意

1. 链接仅包含锚（例如＃1-2），其甚至可用于为特定内容添加书签。 （需要更多js。）
2. CSS仍然可以显示每个标签的图像。