.active鏈接的css樣式不適用於使用部分的單個頁面

Question

我收到了從themeforest購買的模板的zip文件的電子郵件，他們要求我對其進行修改。 有一個水平導航欄，上面有指向頁面不同部分的鏈接（這是一個頁面的網站），在未修改的模板中 ，活動的導航鏈接（無論是“主頁”，“團隊”，“服務”還是“聯系人”）都有根據您單擊的背景顏色而不同。 當我使用修改后的頁面時 ，“活動導航鏈接”樣式似乎無法正常工作。

我不知道哪里出了問題。 可能是我不熟悉鏈接到頁面的各種腳本或引導CSS。

我嘗試將.active類的名稱更改為.viewing ，以防出現偽/命名沖突，並且沒有任何區別。

導航欄來源如下：

<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

我不確定添加類而不使用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

Answer 2

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);

也許地圖上的東西讓您發瘋了？