javascript - JavaScript が正しく動作しない

Question

JavaScript から背景を取得するナビゲーションバーがあります。背景のみを追加しnth-childます。修正方法がわかりません。何か案は？更新: JS の完全なコードは次のとおりです。

$(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 を追加しました

score 2 · Accepted Answer

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

それを試してみてください

score 0 · Accepted Answer

これを jQuery 対応関数に追加したところ、機能しました。update_location() 関数をコメントアウトしました。

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

javascript - JavaScript が正しく動作しない

2 に答える 2

Related

Reference