0

单击菜单更改内容区域。如果单击“menu2”或“menu3”，则“下一步”按钮不起作用。 

// Menu click 
$(".nav ul li a").click(function () {
    var x= $(this).parent().attr('id');
    $('.tbClass').removeClass('pTabActive');
    $('#c'+x).addClass('pTabActive');
    $('.nav ul li').removeClass('mActive');
    $(this).parent().addClass('mActive');
    //location.hash = $(this).attr('href'); /* URL Parametre Location */                          
});

// Navigation Click
$(".btnNext").click(function () {
    var x= $('.nav ul li').attr('class');
    var $item=$('.nav ul li.'+x);
    var $index=$('.nav ul li').index($item); // selected menu index
    alert($index);
});

小提琴：http: //jsfiddle.net/Ertbihal/kBuCe/13/

我怎样才能让它工作？

4

4 回答 4

0

首先，您不应该向类或 ID 添加数值……您没有正确引用该类。

以下代码始终显示mActive：

    var x= $('.nav ul li').attr('class');

工作代码：

// Navigation Click
$(".btnNext").click(function () {
    if ($(".mActive").next().length)
    {
        a = $(".mActive");
        a.removeClass("mActive");
        a.next().addClass("mActive");
        b = $(".pTabActive");
        b.removeClass("pTabActive");
        b.next().addClass("pTabActive");
    }
});

$(".btnPrevious").click(function () {
    if ($(".mActive").prev().length)
    {
        a = $(".mActive");
        a.removeClass("mActive");
        a.prev().addClass("mActive");
        b = $(".pTabActive");
        b.removeClass("pTabActive");
        b.pre().addClass("pTabActive");
    }
});

小提琴：http: //jsfiddle.net/kBuCe/17/

于 2013-02-08T12:18:11.297 回答
0

像这样试试

var x= $('.mActive').attr('id');
var $index=$('.nav ul li').index($("#"+x));
alert($index);

看演示

于 2013-02-08T12:19:33.230 回答
0

尝试

// Menu click 
var menuItems = $(".nav ul li a").click(function () {
    var x = $(this).parent().attr('id');
    $('.tbClass').removeClass('pTabActive');
    $('#c' + x).addClass('pTabActive');
    $('.nav ul li').removeClass('mActive');
    $(this).parent().addClass('mActive');
    //location.hash = $(this).attr('href'); /* URL Parametre Location */                          
});

// Navigation Click
$(".btnNext").click(function () {
    var $item = $('.nav ul li.mActive');
    var $index = $('.nav ul li').index($item); // selected menu index
    if ($index < menuItems.length-1){
        menuItems[$index+1].click();
    }
});

$(".btnPrevious").click(function () {
    var $item = $('.nav ul li.mActive');
    var $index = $('.nav ul li').index($item); // selected menu index
    if ($index > 0){
        menuItems[$index-1].click();
    }
});

演示在http://jsfiddle.net/gaby/kBuCe/15/

于 2013-02-08T12:23:56.163 回答
0

我认为这对你来说是完美的：

// Menu click 
$(".nav ul li a").click(function () {
  $(this).parent().addClass('mActive').siblings().removeAttr('class');    
  $('#c'+$(this).parent().attr('id')).addClass('pTabActive').siblings().removeClass('pTabActive');  
});

// Navigation Click
$(".btnNext").click(function () {        
  var _index=$('.nav ul li.mActive').index() + 1;
  if(_index <= $('.nav ul li').length)
    $('.nav ul li').eq(_index).find('a').click();   
});

$(".btnPrevious").click(function () {
   var _index=$('.nav ul li.mActive').index() - 1;
   if(_index >= 0)
    $('.nav ul li').eq(_index).find('a').click();   

});

演示：http: //jsfiddle.net/ducwidget/kBuCe/18/

于 2013-02-08T12:58:56.503 回答