JavaScript不能正常工作

我有一個從javascript獲取背景的導航欄。它只會添加背景nth-child。不知道如何解決它。有任何想法嗎？更新：這是JS的完整代碼：JavaScript不能正常工作

$(document).ready(function() { 
$('.home, .logo').live("click",function(){ 
    $(window).unbind("scroll"); 
    window.setTimeout(function(){$(window).bind("scroll",function(){update_location();});},1500); 
    $('body,html').animate({ 
     scrollTop: 0 
    }, 800); 
    return false; 
}); 
$('#nav').onePageNav({ 
scrollOffset: 40, 
}); 

/* Tab hover effect starts 
$('.top-box').hover(function(){ 
    $(this).stop().animate({ 
     width:   "300px", 
     marginLeft:  "-25px", 
     minHeight:  "250px", 
     top:   "-25px" 
    }); 
    $(this).find('p').stop().animate({ 
     paddingRight: "50px", 
     paddingLeft: "50px" 
    }); 
    $(this).css({"z-index":"5"}); 
},function(){ 
    $(this).stop().animate({ 
     width:   "240px", 
     marginLeft:  "0px", 
     minHeight:  "190px", 
     top:   "0" 
    }); 
    $(this).css({"z-index":"0"}); 
    $(this).find('p').stop().animate({ 
     paddingRight: "20px", 
     paddingLeft: "20px" 
    }); 
}); 
/* Tab hover effect ends */ 

//navigation arrow starts 
var $el, leftPos, newWidth, 
    $mainNav = $("#nav"); 

$mainNav.append("<li id='magic-line'></li>"); 
var $magicLine = $("#magic-line"); 

$magicLine 
    .width($(".current_page_item").width()) 
    .css("left", $(".current_page_item a").position().left) 
    .data("origLeft", $magicLine.position().left) 
    .data("origWidth", $magicLine.width()); 

//scroll arrow 

function update_location(){ 
    $el = $('#nav').children('li.current'); 
    leftPos = $el.position().left; 
    newWidth = $el.width(); 
    $('#nav li:nth-child(4) a').addClass('button-style'); 
    if(window.top.scrollY == 0) 
    { 
     setTimeout(function(){ 
     $magicLine.stop().animate({ 
      left: 8, 
      width: 355 
     });},1000); 
     $('#nav li:nth-child(4) a').removeClass('button-style'); 

    } 
    else 
    { 
     setTimeout(function(){ 
     $magicLine.stop().animate({ 
      left: leftPos, 
      width: newWidth 
     });},1000); 
    } 
} 

$('#magic-line').css('left', '-15px', 'width','411px'); 
$(window).scroll(function(){ 
    update_location(); 
}); 

//click arrow 
$("#nav li a").click(function() { 
    $el = $(this); 
    leftPos = $el.position().left; 
    newWidth = $el.parent().width(); 
    $magicLine.stop().animate({ 
     left: leftPos, 
     width: newWidth 
    }); 
}); 
//navigation arrow ends 

/* Tab nav starts */ 
var $el_tab, leftPos_tab, newWidth_tab, 
    $mainTab = $("#tab"); 

$mainTab.append("<li id='magic-tab'></li>"); 
var $magicTab = $("#magic-tab"); 

$magicTab 
    .width($(".current_tab_item").width()) 
    .css("left", $(".current_tab_item a").position().left) 
    .data("origLeft", $magicTab.position().left) 
    .data("origWidth", $magicTab.width()); 

$("#tab li a").click(function() { 
    $el_tab = $(this); 
    $("#tab li a").css('color','#333'); 
    $el_tab.css({color:'#fff'}); 
    leftPos_tab = $el_tab.position().left; 
    newWidth_tab = $el_tab.parent().width(); 
    $magicTab.stop().animate({ 
     left: leftPos_tab, 
     width: newWidth_tab 
    }); 
    var rel_id = $el_tab.attr('href'); 
    $('#tabs-container').find('.tab-content').fadeOut('fast'); 
    $('#tabs-container').find(rel_id).fadeIn('fast'); 
    return false; 

}, function() { 
    $magicTab.stop().animate({ 
     left: $magicTab.data("origLeft"), 
     width: $magicTab.data("origWidth") 
    }); 
}); 
/* Tab nav ends */ 

/* Tab_visioin starts */ 
var $el_tab_visioin, leftPos_tab_visioin, newWidth_tab_visioin, 
    $mainTab_visioin = $("#tab_visioin"); 

$mainTab_visioin.append("<li id='magic-tab-vision'></li>"); 
var $magicTab_visioin = $("#magic-tab-vision"); 

$magicTab_visioin 
    .width($(".current_vision_item").width()) 
    .css("left", $(".current_vision_item a").position().left) 
    .data("origLeft", $magicTab_visioin.position().left) 
    .data("origWidth", $magicTab_visioin.width()); 

$("#tab_visioin li a").click(function() { 
    $el_tab_visioin = $(this); 
    $("#tab_visioin li a").css('color','#333'); 
    $el_tab_visioin.css({color:'#fff'}); 
    leftPos_tab_visioin = $el_tab_visioin.position().left; 
    newWidth_tab_visioin = $el_tab_visioin.parent().width(); 
    $magicTab_visioin.stop().animate({ 
     left: leftPos_tab_visioin, 
     width: newWidth_tab_visioin 
    }); 
    var rel_id_visioin = $el_tab_visioin.attr('href'); 
    $('#tabs-container-visioin').find('.tab-content').fadeOut('fast'); 
    $('#tabs-container-visioin').find(rel_id_visioin).fadeIn('fast'); 
    return false; 

}, function() { 
    $magicTab_visioin.stop().animate({ 
     left: $magicTab_visioin.data("origLeft"), 
     width: $magicTab_visioin.data("origWidth") 
    }); 
}); 
/* Tab_visioin ends */ 

/* Tab nav starts */ 
var $el_tab1, leftPos_tab1, newWidth_tab1, 
    $mainTab1 = $("#tab1"); 

$mainTab1.append("<li id='magic-tab1'></li>"); 
var $magicTab1 = $("#magic-tab1"); 

$magicTab1 
    .width($(".current_tab_item1").width()) 
    .css("left", $(".current_tab_item1 a").position().left) 
    .data("origLeft", $magicTab1.position().left) 
    .data("origWidth", $magicTab1.width()); 

$("#tab1 li a").click(function() { 
    $el_tab1 = $(this); 
    $("#tab1 li a").css('color','#333'); 
    $el_tab1.css({color:'#fff'}); 
    leftPos_tab1 = $el_tab1.position().left; 
    newWidth_tab1 = $el_tab1.parent().width(); 
    $magicTab1.stop().animate({ 
     left: leftPos_tab1, 
     width: newWidth_tab1 
    }); 
    var rel_id = $el_tab1.attr('href'); 
    $('#tabs-container1').find('.tab-content').fadeOut('fast'); 
    $('#tabs-container1').find(rel_id).fadeIn('fast'); 
    return false; 

}, function() { 
    $magicTab1.stop().animate({ 
     left: $magicTab1.data("origLeft"), 
     width: $magicTab1.data("origWidth") 
    }); 
}); 
/* Tab nav ends */ 

/* Form validation */ 

$("form[name='apply']").submit(function(){ 
    var error = true; 
    var text_fields = ["fist-last-name", "practice-name", "zipcode", "city", "website-address", "email"]; 
    $.each(text_fields,function(key,value){ 
     if(!$.trim($("input[name='"+value+"']").val()) == "") { 
      $("input[name='"+value+"']").css({'border-color': '#ccc'}); 
     } 
     else{ 
      $("input[name='"+value+"']").css({'border-color': 'red'}); 
      error = false; 
     } 
    }); 
    if($("form[name='apply'] select[name='select-school']").val() == "--select--") { 
     $("form[name='apply'] select[name='select-school']").css({'border-color': 'red'}); 
     error = false; 
    } 
    else { 
     $("form[name='apply'] select[name='select-school']").css({'border-color': '#ccc'}); 
    } 
    var textarea_field = ["address1"]; 
    $.each(textarea_field,function(key,value){ 
     if(!$.trim($("form[name='apply'] textarea[name='"+value+"']").val()) == "") { 
      $("form[name='apply'] textarea[name='"+value+"']").css({'border-color': '#ccc'}); 
     } 
     else { 
      $("form[name='apply'] textarea[name='"+value+"']").css({'border-color': 'red'}); 
      error = false; 
     } 
    }); 
    console.log(error); 
    if(error == true) { 
     $.post('mail.php',$("form[name='apply']").serialize(),function(data){ 
      console.log(data); 
     }); 
    } 
    return error; 
}); 

$("form[name='apply'] input[type='text'], form[name='apply'] textarea").blur(function(){ 
    if($.trim($(this).val()) == ""){ 
     $(".error-message").text($(this).attr('title')); 
     $(this).css({'border-color': 'red'}); 
    } 
    else { 
     $(this).css({'border-color': '#ccc'}); 
     $(".error-message").text(''); 
    } 
}); 
$("form[name='apply'] input[type='text'], form[name='apply'] textarea").bind("keydown",function(){ 
    if($.trim($(this).val()) == ""){ 
     $(".error-message").text($(this).attr('title')); 
     $(this).css({'border-color': 'red'}); 
    } 
    else { 
     $(this).css({'border-color': '#ccc'}); 
    } 
});

}）;

此類的CSS低於：

#nav .button-style, #tab li#magic-tab, #tab1 li#magic-tab1, #tab_visioin li#magic-tab-vision, #nav li#magic-tab-nav { 
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.3); 
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.3); 
box-shadow: 0 2px 2px rgba(0,0,0,0.3); 
background: #3a5f72; /* Old browsers */ 
margin-left: -14px; 
margin-right: -14px; 
padding: 8px 7px; 
color: #fff !important; 
margin-top: 10px; 
font-weight: bold;

}

<div class="navbar-fixed-top navbar" > 
    <div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav nav-pills pull-right" id="nav"> 
     <li class="current_page_item" style="width: 355px;"> 
      <a href="#home" class="logo" style="display:block; width: 355px;"> 
      <img src="" class="current_page_item" width="355" alt="" /> 
      </a> 
     </li> 
     <li><a href="#vision">VISION</a></li> 
     <li><a href="#services">SCHOOLS</a></li> 
     <li><a href="#apply">REQUEST AN EVALUATION</a></li> 
     <li><a href="#how-it-works">HOW IT WORKS</a></li> 
     <li><a href="#contact-us">CONTACT US</a></li> 
     </ul> 
    </div> 
    </div> 
</div>

編輯：改變JS回原來的JS 編輯：加入HTML

來源

2012-05-07 Rodney Wilson

的一切，唯一相關的線你貼是'$（「＃資產淨值李：第n個孩子（4）」）。addClass（「按鈕式」） ;'。如果你不先做家庭作業，我們無法幫助你。 –

在黑暗中刺探：你在測試什麼瀏覽器？ – McGarnagle

@裏卡多我要做什麼功課？你爲什麼不發佈相關問題。我是新來的，並尋求一些幫助。或者這對你來說太難了，樂觀主義者... –

$(document).ready(function() { 
    $('.home','.logo').live("click",function(){ 
    $(window).unbind("scroll"); 
    window.setTimeout(function(){$(window).bind("scroll",function(){update_location();});},1500); 
    $('body,html').animate({ 
     scrollTop: 0 
    }, 800); 
    return false; 
}); 
$('#nav').onePageNav({ 
    scrollOffset: 40, 
});

試試吧

來源

2012-05-07 07:56:28 Learner

仍然只在導航欄上選擇第n個孩子（4）鏈接。 –

我在jQuery準備好的功能中添加了這個功能，它工作正常。我註釋掉update_location（）函數：

$('#nav li a').click(function(){ 
    $('#nav li a').removeClass('button-style'); 
    $(this).addClass('button-style'); 
});

來源

2012-05-07 21:15:33

JavaScript不能正常工作

回答

相關問題