0

I've been searching for the past couple of days, however, I haven't been able to find a solution which resolves all the constraints I'm currently facing. Any help would be much appreciated.

jQuery is already being used on the page.

Current Scenario

I have an existing page with multiple panels. Each panel has a small navigation menu (a horizontal UL list) which is used to Show/Hide layers within that panel. The Show/Hide function is working as intended.

What is missing

Highlight currently active menu item when clicked and restore the previously active item to inactive by changing class.

Constraints

  1. The classes - active/inactive are applied to <a> tag
  2. The design is such that both the active/inactive classes are unique i.e. we can not assign a common class (e.g. .selected) to a group of or all hyperlinks
  3. There are multiple such unique groups on the page and I need to be able to target them individually.

jsFiddle

Please refer to the jsFiddle illustration here.

HTML Code

The basic block of HTML that I'm working with is as follows:

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

There are multiple such panels (each unique) on the page, thus the other similar solutions fail to work.

4

3 回答 3

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');

});

Check this out:

DEMO1

Another DEMO2

In DEMO2, I use ul.nav a common class to all ul, so that you can change and various ids for different uls.

I think you need something like this.

于 2012-05-07T08:21:14.037 回答
0

If you have multiple such panels then you should use classes

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

and you can use this code to handle them.

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

it will work for all panels

于 2012-05-07T08:22:57.887 回答
0

When using jQuery, you shouldn't add the js function to href tag, check my demo for a better solution.

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

Note that

  1. the links only contain an anchor (e.g. #1-2) which can even be used to bookmark a specific content. (More js required.)
  2. the CSS still is able to display an image for each tab.
于 2012-05-07T08:23:50.523 回答