下一个按钮jquery不工作警告更改文本内容

Question

单击菜单更改内容区域。如果单击"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);
});

Fiddle：http://jsfiddle.net/Ertbihal/kBuCe/13/

我怎样才能让它工作？

Answer 1

像这样尝试

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

请参阅演示

Answer 2

尝试

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

Answer 3

第一件事是不应该向类或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");
    }
});

Fiddle：http://jsfiddle.net/kBuCe/17/

Answer 4

我认为这非常适合您：

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