섹션을 사용하는 단일 페이지에서 .active 링크가 작동하지 않는 CSS 스타일

Question

themeforest에서 구입 한 템플릿의 zip 파일을 전자 메일로 보내고 수정하도록 요청했습니다. 페이지의 다른 섹션 (단일 페이지 웹 사이트)에 여러 링크가있는 가로 탐색 막대가 있으며 unmodified template에는 활성 탐색 링크 (집, 팀, 서비스 또는 연락처)에 관계없이 클릭 한 항목에 따라 다른 배경색 my modified page을 사용할 때 "활성 탐색 링크"스타일이 작동하지 않는 것 같습니다.

어디에 잘못 될지 알 수 없습니다. 페이지에 링크 된 다양한 스크립트 또는 부트 스트랩 CSS에 익숙하지 않을 수도 있습니다.

클래스의 이름을 변경하려고 시도했지만 의사/이름 충돌이 발생해도 큰 차이는 없습니다.

<div class="span9 nav-wrapper"> 
         <nav> 
          <ul> 
           <li><a href="#section-home" id="nav-home" class="active">Home</a></li> 
           <li><a href="#our-team" id="nav-team">Team</a></li> 
           <li><a href="#our-services" id="nav-services">Services</a></li> 
           <li><a href="#contact-section" id="nav-contact">Contact</a></li> 
          </ul> 
         </nav> 
         <div class="header-phone-number"><span>Call us on</span> <i class="icon-phone"></i> 1800 25 1800</div> 
        </div> 

과 링크에 적용되는 CSS입니다 : 다음과 같이

순자산 바 소스입니다

nav a { 
    color: #fff; 
    text-transform: uppercase; 
    display: inline-block; 
    padding: 26px 20px; 
    font-size: 12px; 
    font-family: 'Open Sans',sans-serif; 
} 

nav a:hover { 
    background: #616a73; 
} 

nav a:hover, 
nav a:visited { 
    color: #fff; 
    text-decoration: none; 
    outline: none; 
} 

nav a.active { 
    background: #4c5660 url(../img/banner-bg.jpg); 
    color: #fff; 
    outline: none; 
} 

사람이 어떻게 ".active는 오른쪽 방향으로 날 지점 수 "클래스는이 특정 탐색 모음에서 작동하며 클릭하면 다른 탐색 링크에 어떻게 적용됩니까? jquery 일인가요?
왜이 탐색 바에 대한 템플릿에서 색상이 변경된 것으로 생각되면 수정 된 페이지가 "손상"됩니까?

미리 감사드립니다.

Answer 1

JQuery에 문제가 있습니다. 다음 비트가 완벽하게 정상적으로 활성화 된 작품의 클래스를 실행하는 경우

:

$('nav a').click(function(){ 
     $('nav a').removeClass('active'); 
     $(this).addClass('active'); 
     var href= $(this).attr('href'); 

     if (guardianIsMobile === true){ 
      $('.nav-wrapper').hide(); 
     } 

     $.scrollTo(href, 800, { 
      onAfter : function(){ 
       //add function to do after the animation here if required 
      } , 
      offset: -30 //use this to position the window exactly where you want 
     }); 

     return false; 
    }); 

귀하의 사이트에서 콘솔을 보면이 다음과 같은 오류지고있다 :

Uncaught TypeError: Cannot read property 'offsetWidth' of null 

이 오류 참조 custom.js 행 148은 다음과 같습니다.

var map = new google.maps.Map(document.getElementById("contact-map"),myMapOptions); 

지도가있는 것이 어떨까요? 너 데려다 줄까?

Answer 2

javascript 나 php를 사용하지 않고 클래스를 추가하는 것에 대해 잘 모르겠습니다.

jQuery를

$("a").click(function() { 
    $("nav").find("a.current").removeClass("current"); 
    $(this).addClass("current"); 
}); 

PHP (테스트하지)

<?php 
    $nav = "<nav><ul><li>"; 
    $links = array(
     '#home' => 'Home', 
     '#serv' => 'Service', 
     '#con' => 'Contact', 
     '#about' => 'About' 
    ); 

    if(isset($_GET['link'])) // link = integer 
    { 
     $i = 1; 
     foreach($links as $key => $val) 
     { 
      if($_GET['link'] == $i) 
      { 
       $nav .= "<a class =\"current\" href=\"".$key."\">".$val."</a>"; 
      } 
      else 
      { 
       $nav .= "<a href=\"".$key."\">".$val."</a>"; 
      } 
      ++$i; 
     } 
    } 

    echo $nav; // Somewhere 
?> 

jsfiddle

: 당신이 중 하나를 사용하고자하는 경우, 이것은 내가 가지고 올 수 있었던 것입니다